/* ==========================================================================
16_SPECIFICS
--------------------------------------------------------------------------
* README

========================================================================== */

/* README
========================================================================== */

/*!
 * Styles on this stylesheet are the All specific styles.
 * That means they apply to any page that deals with an exception to any
 * default style.

 * If you need to deal with an exception to any default styles, you should
 * manage it by adding a .X--modifier class to the .X element and develop the
 * given exception nested to this .X--modifier class in this stylesheet under
 * the corresponding page subtitle.

 * These .X--modifier classes and its nested styles are grouped by page in which
 * are featured, sorted by HTML depth, and separated in Structure, Behaviour or
 * Appearance styles as appropriate.
 */

/* BUTTON BAR IN THEMES
========================================================================== */

/* HTML Snippet
--------------------------------------------------------------------------
In themes the button bar for a .form is not as in wizards - it comes with a class, and we cannot add our own, so in here we are cloning the pertinent styles to tacke that.
--------------------------------------------------------------------------
<div class="greyButtonBar">
    [...]
</div>
-------------------------------------------------------------------------- */

.greyButtonBar {
    clear: both;
    padding: 0;
    text-align: left;
    transition: all 250ms ease-in-out;
    margin-bottom: -16px;
}

* + .greyButtonBar:not(.fieldSpec) {
    padding-top: 40px;
}

.greyButtonBar:before,
.greyButtonBar:after {
    content: ""; /* Line 1/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
    display: table; /* Line 2/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

.greyButtonBar:after {
    clear: both; /* Line 3/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

.greyButtonBar button,
.greyButtonBar input[type="submit"],
.greyButtonBar .button {
    margin-bottom: 16px;
}

.greyButtonBar:not([class*="col"]) button,
.greyButtonBar:not([class*="col"]) input[type="submit"],
.greyButtonBar:not([class*="col"]) .button {
    min-width: 120px;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    * + .greyButtonBar:not(.fieldSpec) {
        padding-top: 16px;
    }

    .greyButtonBar button,
    .greyButtonBar input[type="submit"],
    .greyButtonBar .button {
        width: 100%;
    }
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .greyButtonBar:not([class*="button-bar--"]) button,
    .greyButtonBar:not([class*="button-bar--"]) input[type="submit"],
    .greyButtonBar:not([class*="button-bar--"]) .button {
        float: left;
    }

    .greyButtonBar:not([class*="button-bar--"]) button + button,
    .greyButtonBar:not([class*="button-bar--"]) input[type="submit"] + input[type="submit"],
    .greyButtonBar:not([class*="button-bar--"]) .button + .button {
        margin-left: 16px;
    }
}


/* CUSTOM STYLES
========================================================================== */

.article__content__description {
    color: #002d4e;
    font-size: 16px;
    line-height: 1.5;
}