styles.scss

@charset "UTF-8";

@import "fonts";
@import "mixins";
@import "vars";

/*
 * g- prefix: Global elements
 * m- prefix: Modular elements
 * s- prefix: Sitewide rules/styles
*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    zoom: 1;
}

body {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    background: $color-body-bg;
    color: $color-text;
    @include font('medium');
    & > a[href='#main'] {
        @include accessibility;
    }
}

h1, h2, h3, h4, h5, h6, b, strong {
    @include font('bold');
}
i, em {
    @include font('italic');
}

a {
    color: inherit;
    text-decoration: none;
    transition: .2s all;
}

img {
    height: auto;
    width: 100%;
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child) {
    margin-bottom: 1em;
}
.content p,
.content li {
    line-height: 1.5em;
}
.content ul,
.content ol {
    padding-left: 1em;
}
.content li {
    margin-bottom: .5em;
}
.content p a:not([itemprop=telephone]):not([itemprop=faxNumber]),
.content li a:not([itemprop=telephone]):not([itemprop=faxNumber]) {
    text-decoration: underline;
    &:hover {
        color: $color-text;
    }
}
.m-footer-nav p a:not([itemprop=telephone]):not([itemprop=faxNumber]),
.m-footer-nav li a:not([itemprop=telephone]):not([itemprop=faxNumber]) {
    &:hover {
       color: $color-text;
    }
}
.m-footer-content p a[itemprop=email]:not([itemprop=telephone]):not([itemprop=faxNumber]) {
    text-decoration: none;
}

.s-full-width {
    width: 100%;
}
.s-page-width {
    margin-right: auto;
    margin-left: auto;
    @include remify('max-width', $page-width);
    width: 100%;
}
.wrapper {
    padding-right: $page-gutter;
    padding-left: $page-gutter;
}

// _mixins.scss:

@mixin accessibility {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

@mixin reverse-accessibility {
    clip: none !important;
    height: auto !important;
    margin: 0 !important;
    position: static !important;
    width :auto !important;
}
.accessibility,
.visually-hidden,
.hidden {
    @include accessibility;
}

// Clearfix
@mixin cf() {
    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after{
        clear: both;
    }
}

@mixin remify($property, $pixels) {
    #{$property}: $pixels; #{$property}: ($pixels / $base-font-size) * 1rem;
}

@mixin font($weightStyle) { /* Used to specify distinct fonts for different weights and styles when using webfonts. */
    @if $weightStyle == 'bold' {
        font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: bold;
    } @else if $weightStyle == 'black' {
        font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: 700;
    } @else if $weightStyle == 'italic' {
        font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-style: italic;
    } @else {
        font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: normal;
    }
}

// _vars.scss

$base-font-size: 16px;

$border-radius: 2px;

$breakpoint-min: 768px;
$breakpoint-max: 767px;
$breakpoint-form: 600px;

$page-width: 980px;
$page-gutter: 20px;
$page-gutter-x2: 40px;

$gutter: 20px;
$gutter-x2: 40px;
$gutter-half: 10px;
$gutter-three-quarters: 15px;

$vert1: 20px;
$vert2: 40px;
$vert3: 60px;

$utility-nav-height: 120px;
$primary-nav-height: 60px;

$color-body-bg: rgb(255, 255, 255);
$color-text: rgb(0, 0, 0);
$color-nav-bg: rgb(200, 200, 200);