/**
 * Feature: re-accent-headings
 *
 * Accent headings based on the RE disc logo.
 * Colored rings with background images.
 *
 * reImagine, reThink, reDesign, reCycle, reBuild,
 * reModel, reNew, reWork, reSearch
 *
 * Example markup:
 *
 *  <h2 class="re-heading re-accent-reimagine"><b>re</b>imagine</h2>
 *
 * Safe to remove if: feature no longer used
 *
 * Tokens available:
 * - See assets/css/tokens.css (var(--lfd-color-accent), etc.) *
 */

:root {
    --re-font-accent: "Raleway", sans-serif;
    --re-font-accent-bold: 700;
    --re-font-accent-extrabold: 800;

    --re-imagine-sq-img-url: url('../../images/accents-square/imagine.sq.jpg');
    --re-think-sq-img-url:   url('../../images/accents-square/think.sq.jpg');
    --re-design-sq-img-url:  url('../../images/accents-square/design.sq.jpg');
    --re-cycle-sq-img-url:   url('../../images/accents-square/cycle.sq.jpg');
    --re-build-sq-img-url:   url('../../images/accents-square/build.sq.jpg');
    --re-model-sq-img-url:   url('../../images/accents-square/model.sq.jpg');
    --re-new-sq-img-url:     url('../../images/accents-square/new.sq.jpg');
    --re-work-sq-img-url:    url('../../images/accents-square/work.sq.jpg');
    --re-search-sq-img-url:  url('../../images/accents-square/search.sq.jpg');
}

/*
    Scalable heading w/ disc accent
    Scales based on font-size on heading text.
*/
.re-heading {
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
    display: inline-block;
    padding-bottom: 0;

    font-family: var(--re-font-accent);
    font-weight: var(--re-font-accent-bold);

    font-size: 40px;
    white-space: nowrap;

    /*margin: 0 0 0 52.5%;*/
    text-transform: lowercase;
}

.re-heading b {
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;

    font-family: var(--re-font-accent);
    font-weight: var(--re-font-accent-extrabold);
    font-size: 1.3em;

    display: inline-block;
    height: 2.4em;
    width: 2.4em;
    line-height: 2.4;
    border-radius: 50%;

    text-align: right;

    border-style: solid;
    border-width: 0.3em;
    padding: .1em;
    margin-right: .1em;

    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 3.2em;
}

/*  MOBILE
    Single column layout
*/
@media only screen and (max-width: 767px) {
    .re-heading {
        font-size: 26px;
        /*margin-left: 50%;*/
    }
}

/* MOBILE 320 - Small phone */
@media only screen and (max-width: 320px) {
    .re-heading {
        font-size: 20px;
    }
}



.re-heading {
    --re-heading-color: #000;
    --re-heading-img: linear-gradient(#52525C, white);
}

.re-heading { color: var(--re-heading-color); }
.re-heading b { background-image: var(--re-heading-img); border-color: var(--re-heading-color) }

.re-heading.re-accent-reimagine { color: var(--re-imagine-color); }
.re-heading.re-accent-reimagine b { background-image: var(--re-imagine-sq-img-url); border-color: var(--re-imagine-color); }

.re-heading.re-accent-rethink { color: var(--re-think-color); }
.re-heading.re-accent-rethink b { background-image: var(--re-think-sq-img-url); border-color: var(--re-think-color); }

.re-heading.re-accent-redesign { color: var(--re-design-color); }
.re-heading.re-accent-redesign b { background-image: var(--re-design-sq-img-url); border-color: var(--re-design-color); }

.re-heading.re-accent-recycle { color: var(--re-cycle-color); }
.re-heading.re-accent-recycle b { background-image: var(--re-cycle-sq-img-url); border-color: var(--re-cycle-color); }

.re-heading.re-accent-rebuild { color: var(--re-build-color); }
.re-heading.re-accent-rebuild b { background-image: var(--re-build-sq-img-url); border-color: var(--re-build-color); }

.re-heading.re-accent-remodel { color: var(--re-model-color); }
.re-heading.re-accent-remodel b { background-image: var(--re-model-sq-img-url); border-color: var(--re-model-color); }

.re-heading.re-accent-renew { color: var(--re-new-color); }
.re-heading.re-accent-renew b { background-image: var(--re-new-sq-img-url); border-color: var(--re-new-color); }

.re-heading.re-accent-rework { color: var(--re-work-color); }
.re-heading.re-accent-rework b { background-image: var(--re-work-sq-img-url); border-color: var(--re-work-color); }

.re-heading.re-accent-research { color: var(--re-search-color); }
.re-heading.re-accent-research b { background-image: var(--re-search-sq-img-url); border-color: var(--re-search-color); }