/* Estilos de la pagina publica de Careers.
 *
 * POR QUE ESTE CSS VIVE EN UN ARCHIVO Y NO EN UN <style> DENTRO DE LA VISTA:
 * el layout base (layouts/skel) envuelve el contenido en <div id="pottorffApp">
 * y app.js monta ahi Vue 2 (new Vue({el:"#pottorffApp"})). Vue compila ese
 * subarbol como plantilla y al re-renderizarlo descarta las etiquetas <style>,
 * asi que un bloque inline dentro de la vista se aplica mientras carga la
 * pagina y desaparece del DOM en cuanto Vue monta. Es el mismo motivo por el
 * que los estilos del panel viven en css/admin-careers.css.
 *
 * Los !important son necesarios porque css/app.css (Bootstrap 4) redefine
 * margenes y tipografia de p, ul y los encabezados dentro de este contenedor.
 */

/* Video de la pagina (ya existia). */
.video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * Ofertas de empleo, como acordeon
 *
 * Cada vacante muestra siempre el titulo y sus etiquetas; el detalle
 * (descripcion, requisitos e instrucciones) se despliega al pulsar. Asi la
 * lista se lee de un vistazo aunque las ofertas tengan mucho texto.
 * ------------------------------------------------------------------------ */

.job-posting {
    border: 1px solid #dfe5ec !important;
    border-left: 3px solid #426590 !important;
    border-radius: 3px;
    background: #fff !important;
    margin: 0 0 10px 0 !important;
    overflow: hidden;
}

.job-posting[open] {
    background: #fbfcfd !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Cabecera pulsable. */
.job-posting__summary {
    cursor: pointer;
    padding: 12px 16px 12px 40px !important;
    position: relative;
    list-style: none;
    outline: none;
}

/* Ocultar el triangulo por defecto del navegador (se dibuja uno propio). */
.job-posting__summary::-webkit-details-marker {
    display: none;
}
.job-posting__summary::marker {
    content: "";
}

.job-posting__summary:hover {
    background: #f4f7fa;
}

/* Flecha propia, que gira al abrir. */
.job-posting__summary::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid #426590;
    border-bottom: 2px solid #426590;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.job-posting[open] .job-posting__summary::before {
    transform: rotate(45deg);
    margin-top: -6px;
}

.job-posting__title {
    display: inline-block;
    color: #426590 !important;
    font-weight: 700;
    font-size: 17px;
    vertical-align: middle;
}

.job-posting__meta {
    display: inline-block;
    margin: 0 0 0 10px !important;
    vertical-align: middle;
}

.job-posting__tag {
    display: inline-block;
    background: #eef2f7;
    color: #4a5b70;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 9px;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
}

/* Cuerpo desplegable. */
.job-posting__body {
    padding: 4px 16px 16px 40px;
    border-top: 1px solid #eaeff4;
}

.job-posting__bloque {
    margin-top: 14px;
}

.job-posting__subtitulo {
    color: #35506f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 6px 0 !important;
}

.job-posting__texto {
    margin: 0 !important;
    line-height: 1.6;
}

.job-posting__requirements {
    margin: 0 !important;
    padding-left: 20px !important;
    list-style: disc !important;
}

.job-posting__requirements li {
    margin-bottom: 4px;
    line-height: 1.5;
}

/* Botones de accion. */
.job-posting__actions {
    margin: 18px 0 0 0 !important;
}

.job-posting__btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 8px 6px 0;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.3;
}

.job-posting__btn--apply {
    background: #426590;
    color: #fff !important;
    border: 1px solid #426590;
}

.job-posting__btn--apply:hover {
    background: #35506f;
    color: #fff !important;
}

.job-posting__btn--pdf {
    background: #fff;
    color: #426590 !important;
    border: 1px solid #c3cfdd;
}

.job-posting__btn--pdf:hover {
    background: #f1f5f9;
    color: #35506f !important;
}

/* En pantallas angostas las etiquetas bajan a su propia linea. */
@media (max-width: 600px) {
    .job-posting__meta {
        display: block;
        margin: 6px 0 0 0 !important;
    }
    .job-posting__body {
        padding-left: 16px;
    }
}