/* ==========================================================================
   07_GENERALS: SECTION
   --------------------------------------------------------------------------
   * README

   * SECTION
   * SECTION HEADER
   * SECTION CONTENT
   * SECTION FOOTER
   ========================================================================== */

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

/*!
 * Styles on this stylesheet are the Section default styles.
 * That means they apply to the HTML you can find first thing inside
 * {% block section %}{% endblock %} in each .page file, and therefore, they
 * apply to all site pages.

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

 * If you need to deal with styles for a new type of Section component or a new
 * sub-element for an existing one, you should develop them in this stylesheet,
 * under a new component subtitle or under the correspondent one accordingly,
 * separating them in Structure, Behaviour or Appearance styles as appropriate.
 */

/* SECTION
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To manage first-level information in each page. The most complex part is the
   .section__header element, as it contemplates several possible sub-elements
   (explicited in the class names) - of course, only keep the ones that suit
   your needs in each case.
   --------------------------------------------------------------------------

    <section class="section">
        <div class="section__header">
            <div class="section__header__image">
                <img src="X">
            </div>

            <div class="section__header__text">
                <h2 class="section__header__text__title">
                    <span class="section__header__text__title__icon"></span> X
                </h2>

                <div class="section__header__text__subtitle">X</div>
            </div>

            <div class="section__header__actions">
                <div class="section__header__actions__links">
                    <a class="link" href="X">X</a>

                    <a class="link" href="X">X</a>
                </div>

                <a class="button button--default" href="X">X</a>
            </div>
        </div>

        <div class="section__content">X</div>

        <div class="section__footer">X</div>
    </section>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.section {
    margin: 0 auto;
    width: 100%;
}

*+.section {
    margin-top: 60px;
}

/* SECTION HEADER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.section__header {
    margin-bottom: 40px;
    width: 100%;
}

.section__header__image {
    width: 90px;
    padding-right: 20px;
}

.section__header__image img {
    display: block;
    margin: auto;
    width: 100%;
}

.section__header__text__title__icon {
    margin-right: 8px;
}

*+.section__header__text__subtitle {
    margin-top: 6px;
}

*+.section__header__text__paragraph {
    margin-top: 6px;
}

.section__header__actions>*+* {
    margin-left: 10px;
}

.section__header__actions__links {
    display: inline-block;
    padding: 12px 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */

/*
 * 1. To center vertically the content.
 */
.section__header {
    display: table; /* 1 */
}

.section__header>* {
    display: table-cell; /* 1 */
    vertical-align: middle; /* 1 */
}

.section__header__text__title__icon {
    vertical-align: text-top;
}

.section__header__actions {
    text-align: right;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.section__header__image img {
    border-radius: 100%;
}

.section__header__text__title {
    font-weight: 400;
}

.section__header__text__title--1 {
    font-size: 32px; /* Used in SearchJobs, Details, Wizards and Profile section titles */
}

.section__header__text__title--2 {
    font-size: 28px; /* Used in HM Dashboard section title */
}

.section__header__text__title--3 {
    font-size: 26px; /* Used in Mandatory Login/Password section title */
}

.section__header__text__title--4 {
    font-size: 24px; /* Used everywhere else */
}
.section__header__text__title--5 {
    font-size: 48px; /* Used in SearchJobs, Details, Wizards and Profile section titles */
    color: #004750;
}

.section__header__text__subtitle {
    font-size: 17px;
    color: #999999;
}

.section__header__actions__links {
    font-size: 14px;
    color: #565656;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */

    /*
     * 1. Overwriting the styles to center vertically the content.
     */
    .section__header__image {
        float: left; /* 1 */
    }

    .section__header__text {
        display: table; /* 1 */
        width: auto; /* 1 */
    }

    .section__header__actions {
        display: block; /* 1 */
        width: 100%; /* 1 */
        padding-top: 10px; /* 1 */
        clear: both; /* 1 */
    }

    .section__header__actions>*:not(.link) {
        display: block;
        width: 100%;
    }

    .section__header__actions>*+* {
        margin-left: 0;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .section__header__text__title--2 {
        font-size: 20px;
    }
    .section__header__text__title--5 {
      font-size: 36px;
    }

}

/* SECTION CONTENT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.section__content+.section__content {
    margin-top: 40px;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .section__content+.section__content {
        padding-top: 40px;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .section__content+.section__content {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    }

}

/* SECTION FOOTER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.section__footer {
    margin-top: 40px;
}

.section__footer .link+.link {
    margin-left: 20px;
}

.footer__rights > div {
    margin-bottom: 10px;
}