/* library vars */

/* brand typsetting */
@font-face {
    font-family:"Roboto Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:  url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
        url('../fonts/RobotoCondensed-Regular.otf') format('opentype');
}

@font-face {
    font-family:"Roboto Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:  url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Bold.woff') format('woff'),
        url('../fonts/RobotoCondensed-Bold.otf') format('opentype');
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/SourceSansPro-Regular.woff2') format("woff2"),
        url('../fonts/SourceSansPro-Regular.woff') format("woff"),
        url('../fonts/SourceSansPro-Regular.otf') format("opentype");
 }

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/SourceSansPro-SemiBold.woff2') format("woff2"),
        url('../fonts/SourceSansPro-SemiBold.woff') format("woff"),
        url('../fonts/SourceSansPro-SemiBold.otf') format("opentype");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/SourceSansPro-Bold.woff2') format("woff2"),
        url('../fonts/SourceSansPro-Bold.woff') format("woff"),
            url('../fonts/SourceSansPro-Bold.otf') format("opentype");
}

@font-face {
    font-family: "CC Accidenz Commons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/CCAccidenzCommons-medium.otf') format("opentype");
}


:root {
    /* brand colors */

    --vocabulary-brand-color-gold: #FBD43C;
    --vocabulary-brand-color-green: #008000;
    --vocabulary-brand-color-tomato: #C74200;
    --vocabulary-brand-color-turquoise: #05b5da;

    --vocabulary-brand-color-soft-gold: #FEF6D8;

    --vocabulary-brand-color-soft-green: #E0F5E0;
    --vocabulary-brand-color-dark-green: #005d00;

    --vocabulary-brand-color-soft-turquoise: #DFF6FC;

    --vocabulary-brand-color-soft-tomato: #FEEDE9;
    --vocabulary-brand-color-dark-tomato: #903101;

    --vocabulary-neutral-color-lighter-gray: #F5F5F5;
    --vocabulary-neutral-color-dark-gray: #767676;

    /* brand typsetting */
    --vocabulary-brand-typeset-nav-family: "Roboto Condensed";
    --vocabulary-brand-typeset-nav-weight: bold;
    --vocabulary-brand-typeset-nav-color: #767676;

    /* whitespace */
    --vocabulary-page-edges-space: 5%;



    /* brand svg sprite sheet capabilities */

    /* note: Be sure you utilize the icons in the way that is most
    accessible and semantic.

    This system allows for 5 icon implementation strategies:

    1. Replace an empty <span> with an icon utterly
        <span class="icon icon-name"></span>

    2. Replace a readable element with an equivalent meaning icon
        <a class="icon-replace icon-name">Mastodon</a>

    3. Attach an icon to the :before of an element, leaving content
        <a class="icon-attach icon-name">Mastodon</a>

    4. Bypass the use of CSS classes, and put icon in content as an
    <svg> with <use> fragment identifiers.
         <svg>
           <use href="/svg/cc/icons/cc-icons.svg#icon-name"></use>
         </svg>

    5. Target an element precisely with less extraneous "icon name classes",
    using mostly CSS. (This could optionally be abstracted further to remove
    the need for the .icon class entirely.)

        <a class="icon">Mastodon</a>

        a:before {
            --icon-sprite: var(--icon-name);
            --icon-sprite- color: white;
            --icon-sprite-size: .8em;

    */

     /* set default icon sprite */
     --icon-sprite: url('../svg/cc/icons/cc-icons.svg#cc-logo');
     --icon-sprite-color: black;
     --icon-sprite-size: 1em;

     /* cc sprite names */
     --cc-logo: url('../svg/cc/icons/cc-icons.svg#cc-logo');
     --cc-heart: url('../svg/cc/icons/cc-icons.svg#cc-heart');
     --cc-heart-filled: url('../svg/cc/icons/cc-icons.svg#cc-heart-filled');
     --cc-quote: url('../svg/cc/icons/cc-icons.svg#cc-quote');

     /* font awesome sprite names */
     --fa-angle-down: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-down');
     --fa-angle-left: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-left');
     --fa-angle-right: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-right');
     --fa-angle-up: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-up');
     --fa-globe: url('../svg/font-awesome/icons/fa-icons.svg#fa-globe');
     --fa-heart: url('../svg/font-awesome/icons/fa-icons.svg#fa-heart');
     --fa-info: url('../svg/font-awesome/icons/fa-icons.svg#fa-info');
     --fa-right-angle: url('../svg/font-awesome/icons/fa-icons.svg#fa-right-angle');
     --fa-search: url('../svg/font-awesome/icons/fa-icons.svg#fa-search');

     --fa-bluesky: url('../svg/font-awesome/icons/fa-icons.svg#fa-bluesky');
     --fa-facebook: url('../svg/font-awesome/icons/fa-icons.svg#fa-facebook');
     --fa-instagram: url('../svg/font-awesome/icons/fa-icons.svg#fa-instagram');
     --fa-linkedin: url('../svg/font-awesome/icons/fa-icons.svg#fa-linkedin');
     --fa-mastodon: url('../svg/font-awesome/icons/fa-icons.svg#fa-mastodon');

}

/* establish svg sprite icon defaults */
.icon {
    display: inline-block;
    /* min-width: 30px;
    min-height: 30px; */
    height: 1em;
    width: 1em;

    font-size: var(--icon-sprite-size);
    background-color: var(--icon-sprite-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-image: var(--icon-sprite);
    mask-image: var(--icon-sprite);

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* customize a specific sprite via matching class on <span>
with .icon, an element replaced with an icon using .icon-replace,
or attaching an icon to an element :before using .icon-attach,
leaving room for semantic and accessible implementation choices  */

.icon.cc-heart, .icon-attach.cc-heart:before {
    --icon-sprite: var(--cc-heart);
}

.icon.cc-heart-filled, .icon-attach.cc-heart-filled:before {
    --icon-sprite: var(--cc-heart-filled);
}

.icon.cc-quote, .icon-attach.cc-quote:before {
    --icon-sprite: var(--cc-quote);
}

.icon.fa-angle-down, .icon-attach.fa-angle-down:before {
    --icon-sprite: var(--fa-angle-down);
}

.icon.fa-angle-left, .icon-attach.fa-angle-left:before {
    --icon-sprite: var(--fa-angle-left);
}

.icon.fa-angle-right, .icon-attach.fa-angle-right:before {
    --icon-sprite: var(--fa-angle-right);
}

.icon.fa-angle-up, .icon-attach.fa-angle-up:before {
    --icon-sprite: var(--fa-angle-up);
}

.icon.fa-globe, .icon-attach.fa-globe:before {
    --icon-sprite: var(--fa-globe);
}

.icon.fa-heart, .icon-attach.fa-heart:before {
    --icon-sprite: var(--fa-heart);
}

.icon.fa-info, .icon-attach.fa-info:before {
    --icon-sprite: var(--fa-info);
}

.icon.fa-right-angle, .icon-attach.fa-right-angle:before {
    --icon-sprite: var(--fa-right-angle);
}

.icon.fa-search, .icon-attach.fa-search:before {
    --icon-sprite: var(--fa-search);
}


.icon-replace.fa-bluesky {
    --icon-sprite: var(--fa-bluesky);
}

.icon-replace.fa-facebook {
    --icon-sprite: var(--fa-facebook);
}

.icon-replace.fa-instagram {
    --icon-sprite: var(--fa-instagram);
}

.icon-replace.fa-linkedin {
    --icon-sprite: var(--fa-linkedin);
}

.icon-replace.fa-mastodon {
    --icon-sprite: var(--fa-mastodon);
}


/* attach an icon to an existing element with a :before */
.icon-attach:before {
    display: inline-block;
    content: '';
    /* min-width: 30px; */
    /* min-height: 30px; */
    height: 1em;
    width: 1em;

    font-size: var(--icon-sprite-size);
    background-color: var(--icon-sprite-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-sprite);
    mask-image: var(--icon-sprite);

    -webkit-mask-size: contain;
    mask-size: contain;

    --icon-sprite: var(--cc-logo);
}

.icon-replace {
    display: inline-block;
    content: '';
    text-indent: -1000px;

    /* min-width: 30px; */
    /* min-height: 30px; */
    height: 1em;
    width: 1em;

    font-size: var(--icon-sprite-size);
    background-color: var(--icon-sprite-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-sprite);
    mask-image: var(--icon-sprite);

    -webkit-mask-size: contain;
    mask-size: contain;

    --icon-sprite: var(--cc-logo);
}