/* ==========================================================================
   SPECIFICS
   --------------------------------------------------------------------------
   * INVERTING CLICKABLE COLORS (commented and ready to use)
      : Nav

   * ELEMENTS
      : Logo (Override/complement)
      : Actions (Override/complement)

   * COMPONENTS
      : Mobile menu (Override/complement)
      : Form item types
         : FileField/FileSchemaField (Override/complement)
      : Button bar (Override/complement)
      : Expired session (Override/complement)

   * MODULES
      : Banner (Override/complement)

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


/* INVERTING CLICKABLE COLORS: Nav
   -------------------------------------------------------------------------- */

/*
.nav__item:not(.nav__item--active) .nav__item__link,
.nav__item:not(.nav__item--active) .nav__item__link:link,
.nav__item:not(.nav__item--active) .nav__item__link:visited {
    color: inherit;
}

.nav__item:not(.nav__item--active) .nav__item__link:hover {
    color: var(--header--clickeable--color);
}

.nav__item--active .nav__item__link,
.nav__item--active .nav__item__link:link,
.nav__item--active .nav__item__link:visited,
.nav__item--active .nav__item__link:hover,
.nav__item--active .nav__item__link:focus,
.nav__item--active .nav__item__link:active {
    color: var(--header--clickeable--color);
}

.subnav__item:not(.subnav__item--active) .subnav__item__link,
.subnav__item:not(.subnav__item--active) .subnav__item__link:link,
.subnav__item:not(.subnav__item--active) .subnav__item__link:visited,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link:link,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link:visited {
    color: inherit;
}

.subnav__item--active .subnav__item__link,
.subnav__item--active .subnav__item__link:link,
.subnav__item--active .subnav__item__link:visited,
.subnav__item--active .subnav__item__link:hover,
.subnav__item--active .subnav__item__link:focus,
.subnav__item--active .subnav__item__link:active,
.portalLanguages__item--selected .portalLanguages__link,
.portalLanguages__item--selected .portalLanguages__link:link,
.portalLanguages__item--selected .portalLanguages__link:visited,
.portalLanguages__item--selected .portalLanguages__link:hover,
.portalLanguages__item--selected .portalLanguages__link:focus,
.portalLanguages__item--selected .portalLanguages__link:active {
    color: var(--header--clickeable--color);
}

+TBD+
*/


/* ELEMENTS: Logo
   -------------------------------------------------------------------------- */

.logo--header {
    background-image: url('../images/logo.webp');
}

.logo--footer {
    background-image: url('../images/logo--footer.webp');
}


/* COMPONENTS: Actions
   -------------------------------------------------------------------------- */

.addDatasetRow {
    background-image: url('../images/icon--add.svg');
}

.addDatasetRow:hover {
    background-image: url('../images/icon--add--hover.svg');
}

.removeDatasetRow {
    background-image: url('../images/icon--remove.svg');
}

.removeDatasetRow:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

.removeFile {
    background-image: url('../images/icon--remove.svg');
}

.removeFile:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

.[id*="dropboxRemove_"] {
    background-image: url('../images/icon--remove.svg');
}

.[id*="dropboxRemove_"]:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

.fileInputCancelButton {
    background-image: url('../images/icon--remove.svg');
}

.fileInputCancelButton:hover {
    background-image: url('../images/icon--remove--hover.svg');
}


/* COMPONENTS: Mobile menu
   -------------------------------------------------------------------------- */

a[class*="__trigger"] {
    background-image: url('../images/icon--menu.svg');
}


/* COMPONENTS: Form item types: FileField/FileSchemaField
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"].FileField div[id*="fileInputContainer_"] .photoInputPreviewWrapper .photoInputPreviewContainer.photoPreviewUnselected {
    background-image: url('../images/icon--user.svg');
}


/* COMPONENTS: Button bar (Override/complement)
   -------------------------------------------------------------------------- */

/* portal gave us the .button-bar class but missed the <div class="button-bar__wrap"></div> within it - while we ask for it, we need to patch a little */
.button-bar {
    display: flex;
    margin-bottom: calc(-1 * var(--spacer--m));
}


/* COMPONENTS: Expired session
   -------------------------------------------------------------------------- */

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: url('../images/close.svg');
}


/* MODULES: Banner
   -------------------------------------------------------------------------- */

.banner--main {
    background-image: url('../images/banner.webp');
}

/* CUSTOM
   -------------------------------------------------------------------------- */

.fieldSpec>label,
.formfieldSpec>label,
.datasetfieldSpec>label,
.fieldSpec fieldset>legend,
.formfieldSpec fieldset>legend,
.datasetfieldSpec fieldset>legend,
.DateFormField>div>label {
    color: var(--color--brand);
}

[class*="__title--"],
.Separator>legend {
    font-family: var(--font--title);
}

.banner--main {
    color: #fff;
}

.nav__item__link {
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: .8px;
}

@media (min-width: 1025px) {


    .nav__item__link {
        padding-right: var(--spacer--m);
        padding-left: var(--spacer--m);
    }

    .nav__item--active .nav__item__link:after {
        content: "";
        position: absolute;
        width: 0%;
        height: 1px;
        bottom: -3px;
        left: 0;
        background-color: #002f5f;
    }

    .footer__links__divider {
        margin-left: var(--spacer--m);
        margin-right: var(--spacer--m);
    }
}

.form [class$="Button"],
.button {
    text-transform: uppercase;
    font-family: var(--font--alt);
    font-weight: 400;
}

.fieldSpec>label,
.paragraph>.label,
.datasetfieldSpec>label {
    color: #333333;
    font-family: var(--font--alt);
    font-weight: 500;
    font-size: 1.4rem;
}

/*footer*/
.footer {
    border-top-color: var(--color--brand);
    font-family: var(--font--alt);
    font-weight: 400;
}

.footer .link {
    font-weight: 400;
    text-transform: capitalize;
}

.footer__content {
    font-family: var(--font--alt);
    font-size: 1.6rem;
    font-weight: 400;
}

.footer__social {
    color: #c7c7c7;
}

.footer__social__item__icon {
    padding-left: .6rem;
}

.article__content .share--inline .share__text {
    font-family: var(--font--alt);
    color: #707070;
    margin-bottom: var(--spacer--m);
    font-weight: 400;
}

@media (max-width: 1023px) {
    .article__content .share--inline .share__text {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

@media (min-width: 1025px) {

    .footer__social {
        padding-right: 22rem;
    }

    .form [class$="Button"],
    .button {
        min-width: 15rem;
    }

    .main .button-bar:not([class*="col"]) button,
    .main .button-bar:not([class*="col"]) input[type="submit"],
    .main .button-bar:not([class*="col"]) .button:not(.button--medium):not(.button--small) {
        min-width: 15rem;
    }
}

.form input:where([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="range"]:not(.progress-bar__selector), [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]):not([class*="select2"]),
.form select,
.form textarea {
    font-family: var(--font--alt);
    font-weight: 400;
}

/* font*/
.nav__item__link,
.list__item__text__title,
.article__header__text__subtitle {
    letter-spacing: .6px;
}

.Separator > label {
    font-family: var(--font--title);
    font-size: 2.6rem;
    font-weight: 500;
    margin: 2rem 0 1.4rem;
}

@media (max-width: 1024px) {
    .Separator > label {
        font-size: 2.2rem;
    }
}

.removeDatasetRow {
    color: #F00;
}

.removeDatasetRow,
.addDatasetRow {
    font-family: var(--font--alt);
    font-weight: 400;
    text-transform: capitalize;
    padding-left: 3rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.main__content--thankyou .form {
    text-align: center;
}

.main__content--thankyou .grid > .grid__item {
    padding-right: var(--grid--columns--gap);
}

.nav__item .nav__item__link .nav__item__link__img {
    background-image: url("../images/icon--internationalization.svg");
}

.avatureThankYouMessage {
    font-size: 2.4rem;
}

.icp.article__content__text {
    font-size: 1.2rem;
}

/* wizard checkbox inline */
.AcceptCheckboxField.checkbox__label--inline .WizardFieldLabel {
    position: absolute;
    left: 1.6rem;
}