/* Global Variables
------------------------------------------------------- */

/*
Everything starts with the global font size.
Include the variable $base-font-size-n (base font size number), 
so we can include the same number in our font-size mixin as is in the $base-font-size variable
*/

$base-font-size: 16px;
$base-font-size-n: 16;
$base-line-height: 1.5em;

$base-spacing: $base-font-size;
$base-spacing-large: $base-spacing*2;
$base-spacing-small: $base-spacing/2;
$border-radius: 4px;

// bottom margin for special clearfix 
// (for example: applied to form select elements)
$cfxmb-margin-bottom: 1rem;

/* Color Variables
------------------------------------------------------- */

// brand color (logo dark)
$brand-color-1: #008752;
$brand-color-1-rgb: rgba(0, 135, 82, 1);

// brand color (logo light)
$brand-color-2: #8cc2a9;
$brand-color-2-rgb: rgba(140, 194, 169, 1);

// secondary AFP green: dark
$brand-color-3: #3c685b;
$brand-color-3-rgb: rgba(60, 104, 91, 1);

// secondary AFP green: medium
$brand-color-4: #8aa49d;
$brand-color-4-rgb: rgba(138, 164, 157, 1);

/* Color background gradient (to beextended) */
/* 
Use:
@extend .afp-gradient;
instead of using a variable for background 
*/
.afp-gradient {
  background: $brand-color-1; // Old browsers
  // IE9 SVG, needs conditional override of 'filter' to 'none'
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODc1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzY4NWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, $brand-color-1 0%, $brand-color-3 100%); // FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$brand-color-1), color-stop(100%,$brand-color-3)); // Chrome,Safari4+
  background: -webkit-linear-gradient(top, $brand-color-1 0%,$brand-color-3 100%); // Chrome10+,Safari5.1+
  background: -o-linear-gradient(top, $brand-color-1 0%,$brand-color-3 100%); // Opera 11.10+
  background: -ms-linear-gradient(top, $brand-color-1 0%,$brand-color-3 100%); // IE10+
  background: linear-gradient(to bottom, $brand-color-1 0%,$brand-color-3 100%); // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-color-1', endColorstr='$brand-color-3',GradientType=0 ); // IE6-8
}
// and invert it for ON states (when used on buttons)
.afp-gradient-on {
  background: $brand-color-3; // Old browsers
  // IE9 SVG, needs conditional override of 'filter' to 'none'
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODc1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzY4NWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, $brand-color-3 0%, $brand-color-1 100%); // FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$brand-color-3), color-stop(100%,$brand-color-3)); // Chrome,Safari4+
  background: -webkit-linear-gradient(top, $brand-color-3 0%,$brand-color-1 100%); // Chrome10+,Safari5.1+
  background: -o-linear-gradient(top, $brand-color-3 0%,$brand-color-1 100%); // Opera 11.10+
  background: -ms-linear-gradient(top, $brand-color-3 0%,$brand-color-1 100%); // IE10+
  background: linear-gradient(to bottom, $brand-color-3 0%,$brand-color-1 100%); // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-color-3', endColorstr='$brand-color-1',GradientType=0 ); // IE6-8
}

/*
// and a couple mixins for custom settings
@mixin brand-color-0-alt($opac) { color: rgba(0, 135, 82, $opac); }
@mixin brand-bg-color-0-alt($opac) { background-color: rgba(0, 135, 82, $opac); }
*/

$base-color-3: #333;
$base-color-6: #666;
$base-color-9: #999;
$base-color-c: #ccc;
$base-color-f: #f6f6f6;

$important: red;
$success: green;
$warning: orange;

/* Generic
------------------------------------------------------- */
// generic.normalize.scss
// generic.box-sizing.scss

/* Base
------------------------------------------------------- */

// Typekit info
// sans: futura-pt 400/500/700

//idp.elmnt.com,gregs-macbook-air.local,gregs-macbook-air.local:5757,localhost,localhost:8888

$sans: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
$sans-regular: "Helvetica Neue", Helvetica, Arial, sans-serif;
$serif: Georgia, Times, "Times New Roman", serif;
$alt-font: Monaco, Menlo, Consolas, "Courier New", monospace;

// base.scss
/* no specific variables */

// base.page.scss
$base-font-family: $sans-regular;
//$base-font-size:; // we set this up top to make it a more global setting
//$base-line-height:; // we set this up top to make it a more global setting
$base-text-color: $base-color-6;
$page-background: #fff;
$transition-time: 0.25s;

// base.images.scss
$figure-margin: 0;
$figure-padding: 0; 
$figcaption-margin: 5px 0 1rem 0;
$figcaption-padding: 1rem;
$figcaption-background-color: black;
$figcaption-font-family: $sans;
$figcaption-font-size: .75rem;
$figcaption-line-height: 1.125rem;
$figcaption-color: black;

// base.links.scss
$link-text-decoration: underline;
$link-color: $brand-color-1;
$link-text-decoration-hover: none;
$link-color-hover: $brand-color-2;

// base.type.scss
$p-margin: 0 0 $base-font-size 0; 
$p-padding: 0;

$heading-font-family: $sans;
$heading-font-weight: 700;
$heading-margin: 0 0 1rem 0;
$heading-color: $brand-color-3;
$heading-line-height: 1.25em;

$h1-size: $base-font-size-n + 34;
$h2-size: $base-font-size-n + 28;
$h3-size: $base-font-size-n + 22;
$h4-size: $base-font-size-n + 16;
$h5-size: $base-font-size-n + 10;
$h6-size: $base-font-size-n + 6;

// mobile font changes
$heading-margin-sm: 0 0 .5rem 0;
$heading-line-height-sm: 1.125em;
$h1-size-sm: $base-font-size-n + 16;
$h2-size-sm: $base-font-size-n + 10;
$h3-size-sm: $base-font-size-n + 8;
$h4-size-sm: $base-font-size-n + 6;
$h5-size-sm: $base-font-size-n + 4;
$h6-size-sm: $base-font-size-n + 2;

$blockquote-margin: 0 0 $base-font-size 0;
$blockquote-padding: 0 0 0 10px;
$blockquote-color: lighten($base-text-color, 20%);
$blockquote-border-left: $base-color-9;

// definition list
$dt-font-weight: bold;
$dt-margin: 1em 0 0 0;
$dt-padding: 0;
$dd-margin: 0;
$dd-padding: 0;

// horizontal rule
$hr-margin-bottom: $base-spacing - 1px;
$hr-border: none;
$hr-border-bottom: 1px solid $base-color-3;

/* Modules - generic
------------------------------------------------------- */

// modules.alerts.scss
// not currently using these styles
// turn them "on" in styles.scss if you want

// modules.forms.scss

/*
I'm in the process of removing all these styles, to use formhack.io styles
styles/_modules.form-hack.scss

$label-color: lighten($base-text-color, 25%);
$label-margin: 0 0 0.5rem 0;
$label-font-size: 1rem;
$label-line-height: 1em;
$label-error-color: red;

$placeholder-color: lighten($base-text-color, 25%);
$placeholder-margin: 0!important;
$placeholder-padding: 0!important;
$placeholder-font-size: 1rem!important;
$placeholder-line-height: 1em!important;

$input-background-color: white;
$input-border: 2px solid lighten($base-text-color, 25%);
$input-border-color: lighten($base-text-color, 50%);
$input-font-family: $sans; 
$input-color: $base-text-color;
$input-font-size: 1rem;
$input-line-height: 1em;
$input-margin: 0 0 1rem 0;
$input-padding: 0.5rem;
$input-width: 100%;

$textarea-line-height: 1.35em;
$textarea-height: 200px;

$input-border-hover: 2px solid lighten($base-text-color, 50%); 
$input-border-focus: 2px solid lighten($base-text-color, 50%); 

$input-radius: 5px; 
$input-rounded: 20px; 

// for use on other elements to match colors:
$input-border-color: lighten($base-text-color, 25%);
$input-border-color-hover: lighten($base-text-color, 50%);

// file, checkboxes, radio buttons

$input-check-margins: 0 5px 0 0; 

$select-background-color: white; 
$select-border: 2px solid lighten($base-text-color, 25%); 
$select-color: $placeholder-color; 
$select-font-family: $sans; 
$select-font-size: 1rem;
$select-line-height: 1em;
$select-margin: 0 0 1rem 0;
$select-padding: 0.7rem;
$select-width: 100%;

$fieldset-border: $input-border;
$fieldset-margin: 0 0 1rem 0; 
$fieldset-padding: 1rem; 

$fieldset-background-color: white; 
$fieldset-legend-margin: 0; 
$fieldset-legend-padding: 0 1rem; 
$fieldset-legend-font-family: $sans; 
$fieldset-font-weight: bold;

*/

// modules.buttons.scss 

// button base styles
$button-color: white;
$button-background-color: black;
$button-text-transform: uppercase;
$button-font-weight-default: bold;
$button-font-weight: 700;
$button-font-size: .7rem;
$button-letter-spacing: 1px;
$button-padding: 1rem 2rem;
$button-margin: 1rem 0;

// special button padding if it's paired with a search bar
// $button-padding-search: $input-padding;

// button states
$button-color-visited: $button-color;
$button-background-color-visited: $button-background-color;
$button-color-hover: $button-color;
$button-background-color-hover: $base-color-6;
$button-color-active: $button-color;
$button-background-color-active: $base-color-6;

// big buttons
$button-big-padding: 2rem 4rem;
$button-big-font-size: 1rem;

// alternate color buttons
$button-color-alt-one: $brand-color-4;
$button-color-alt-two: $brand-color-2;

// modules.tables.scss

/* Modules - layout (grid)
------------------------------------------------------- */

// Grid
// Setting container-max-width at 100% allows for edge-to-edge layout 
// (and edge-to-edge background color even when a wrap is used)
// The (optional) wrap sets a max content width

// |-------------------- screen --------------------|
// |--p--|------------ container -------------|--p--|
// |----------|---------- wrap ----------|----------|

$container-max-width: 100%;
$container-pad: 0 40px;
$container-pad-tablet: 0 20px;
$container-pad-mobile: 0 10px;
$wrap-max-width: 1200px;
$wrap-min-width: 100px;

// modules.layout.scss

$pad: var;
$pad-small: var;
$pad-big: var;

/* Modules - navigation
------------------------------------------------------- */

// modules.nav-global.scss

$nav-global-font: $sans; 

$navutility-font-size: 15px;
$navmain-font-size: 15px;
$nav-global-line-height: 1em;
$navutility-font-weight: bold;
$navutility-font-weight: 700;
$navmain-font-weight: bold;
$navmain-font-weight: 700;

// modules.nav-utility.scss

$utility-nav-holder-bg: $brand-color-3; // the container bg
$utility-nav-bg: $brand-color-3; 
$utility-nav-color: $brand-color-2; 
$utility-nav-pad: 15px;
//$utility-search-button-pad: 10px; 
$utility-nav-hover: $brand-color-4; 
$utility-nav-bg-hover: $brand-color-3; 

$utility-nav-text-transform: none;

// modules.nav-utility.scss (search bar)

$navbar-search-padding: $utility-nav-pad;
$navbar-search-bg-color: white; 
$navbar-search-font-size: $navutility-font-size; 
$navbar-search-line-height: $nav-global-line-height;
$navbar-search-bg-color-hover: $base-color-c;
$navbar-search-bg-color-focus: $base-color-c;
$navbar-search-bg-color-active: $base-color-c;

// modules.nav-main.scss

$main-nav-font-size: 1.125rem;
$main-nav-line-height: 1em;
$main-nav-text-transform: uppercase;

$main-nav-holder-bg: white; // the container bg
$main-nav-li-margin: 0 1rem 0 0;
$main-nav-button-pad: 1rem 1rem 1rem 24px; // using a px setting on the left padding because of the icon 
$main-nav-bg: white; // make this trans, and white for the subs only 
$main-nav-bg-hover: white;  // make this trans, and white for the subs only
$main-nav-color: $brand-color-1; 
$main-nav-color-hover: $brand-color-2; 

// tablet size changes
$main-nav-li-margin-tablet: 0 .5rem 0 0;
$main-nav-button-pad-tablet: 1rem .5rem 1rem 24px;
$main-nav-font-size-tablet: 1rem;

// smaller
$main-nav-li-margin-tablet-sm: 0 .25rem 0 0;
$main-nav-button-pad-tablet-sm: 1rem .25rem 1rem 24px;
$main-nav-font-size-tablet-sm: .85rem;

// remove the icons
$main-nav-button-pad-noicons: 1rem .5rem;

$brand-pad: 40px 0;
$brand-bg: #ccc;

$main-nav-sub-bg: $brand-color-3; 
$main-nav-sub-color: $brand-color-2;

$main-nav-sub-bg-hover: $brand-color-2;
$main-nav-sub-color-hover: $brand-color-3;

// the navbar search button

$button-navbar-background-color: magenta;
$button-navbar-background-color-hover: red;
$button-navbar-background-color-active: red;

// the navbar social icons

$navbar-social-icons-margin: 0;
$navbar-social-icons-padding: $utility-nav-pad;
$navbar-social-icons-font-size: $navutility-font-size;
$navbar-social-icons-line-height: $nav-global-line-height;

// modules.nav-mobile.scss

$nav-mobile-button-pad: 1rem;

/* Modules - Add-ons
------------------------------------------------------- */
// modules.responsiveslides.scss
$rslides-margin-bottom: 1rem;
$rslides-tap-color: rgba(0,0,0,0);
$rslides-nav-top: 50%;
$rslides-nav-left: 0;
$rslides-nav-z-index: 99;
$rslides-nav-opacity: 0.7;
$rslides-nav-opacity-active: 1.0;
$rslides-tabs-margin: 1rem 0 0 0;
$rslides-tabs-li-margin: 0 1rem 0 0;
$rslides-tabs-radius: 15px;
$rslides-tabs-bg-hex: #ccc;
$rslides-tabs-bg-rgb: rgba(0,0,0, .2);
$rslides-tabs-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
$rslides-tabs-width: 9px;
$rslides-tabs-height: 9px;
$rslides-tabs-here-hex: #222;
$rslides-tabs-here-rgb: rgba(0,0,0, .8);
$rslides-caption-display: block;
$rslides-caption-bottom: 0;
$rslides-caption-left: 0;
$rslides-caption-right: 0;
$rslides-caption-padding: 15px;
$rslides-caption-text-align: center;
$rslides-caption-bg-hex: #000;
$rslides-caption-bg-rgb: rgba(0,0,0, .8);
$rslides-caption-color: white;

// modules.accordions.scss

// headroom.js
$header-animation-speed: 500ms;

/* Customizations
------------------------------------------------------- */
// custom.scss

/* Media
------------------------------------------------------- */
// media.print.scss

/* Responsive Breakoints
------------------------------------------------------- */

$break-xs: 480px;
$break-sm: 768px;
$break-md: 992px;
$break-lg: 1200px;

// -------------------------------------------------------