/*
Theme Name: understrap_af4f
Theme URI: 
Author: Michael Voskakis
Author URI: 
Description: A Child Theme of understrap
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: understrap
Text Domain: understrap_af4f
*/

/* Agrifood4Future color palette */
:root {
    --af4f-light-grey: #f1f1f1;
    --af4f-light-seafoam: #bfdfcb;
    --af4f-dark-seafoam: #83c6a0;
    --af4f-light-blue: #88aeb7;
    --af4f-dark-blue: #127d89;
    --af4f-white: #ffffff;
    --af4f-black: #000000;
    --af4f-gray-seafoam: #a1bfb9;
    --af4f-accent-seafoam: #84c6a0;
}
/*
--agenso-ag: #98c21d;
--agenso-en: #1d70b8;
--agenso-so: #f39200;
*/

/* HomePage */
body.home {
    background-color: whitesmoke;
}

/* Navigation */
header#wrapper-navbar {
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    z-index: 100;
}

header#wrapper-navbar:not(.floating) > nav#main-nav > div.container > a.navbar-brand.custom-logo-link > img.img-fluid {
    max-width: 100%;
    transition-duration: 0.4s;
}

nav#main-nav.navbar {
    background-color: var(--af4f-black);
}

nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapsing > ul#main-menu > li > a,
nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapse > ul#main-menu > li > a {
    color: var(--af4f-white);
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    transition-duration: 1s;
}

nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapsing > ul#main-menu > li > a:hover,
nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapse > ul#main-menu > li > a:hover {
    color: var(--af4f-accent-seafoam);
    text-decoration-line: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--af4f-accent-seafoam);
    transition-duration: 1s;
}

nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapsing > ul#main-menu > li > a::selection,
nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapsing > ul#main-menu > li *::selection,
nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapse > ul#main-menu > li > a::selection,
nav#main-nav.navbar > div.container > div#navbarNavDropdown.collapse > ul#main-menu > li *::selection {
    background-color: var(--af4f-accent-seafoam);
    color: var(--af4f-white);
}

/* Navigation */
/* Navigation: floating version */
header#wrapper-navbar.floating {
    opacity: 70%;
}

header#wrapper-navbar.floating > nav#main-nav > div.container > a.navbar-brand.custom-logo-link > img.img-fluid {
    max-width: 60%;
    transition-duration: 0.4s;
}

/* Footer */
div#wrapper-footer.wrapper {
    background-color: var(--af4f-black);
}
div#wrapper-footer.wrapper > div.container > div.row footer#colophon.site-footer div.site-info {
    color: var(--af4f-white);
    font-family: "Rubik", sans-serif;
    font-weight: 500;
}

div#wrapper-footer.wrapper > div.container > div.row footer#colophon.site-footer div.site-info *::selection {
    background-color: var(--af4f-white);
    color: var(--af4f-black);
}

/* Agrifood4Future specific fonts and typography style */
.rubik-regular {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.oooh-baby-regular {
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
}

.af4f-text-light-blue,
.af4f-text-light-blue * {
    color: var(--af4f-light-blue);
}

.af4f-text-light-blue::selection,
.af4f-text-light-blue *::selection {
    background-color: var(--af4f-light-blue);
    color: var(--af4f-white);
}

.af4f-text-dark-blue,
.af4f-text-dark-blue * {
    color: var(--af4f-dark-blue);
}

.af4f-text-dark-blue::selection,
.af4f-text-dark-blue *::selection {
    background-color: var(--af4f-dark-blue);
    color: var(--af4f-white);
}

.af4f-text-accent-seafoam::selection,
.af4f-text-accent-seafoam *::selection {
    background-color: var(--af4f-accent-seafoam);
    color: whitesmoke;
}

.af4f-text-black::selection,
.af4f-text-black *::selection {
    background-color: var(--af4f-black);
    color: var(--af4f-white);
}

a.solution-title-link {
    color: var(--af4f-dark-blue);.
}

a.solution-title-link:hover {
    color: var(--af4f-light-blue);
}

a.solution-title-link::selection,
a.solution-title-link *::selection {
    background-color: var(--af4f-dark-blue);
    color: var(--af4f-white);
}

.link-external-solution {
    color: var(--af4f-dark-blue);
    transition-duration: 0.7s;
}

.link-external-solution:hover {
    color: var(--af4f-light-blue);
    transition-duration: 0.7s;
}

.link-external-solution::after {
    content: "\2197";
}

.link-external {
    color: var(--af4f-dark-blue);
    transition-duration: 0.7s;
}

.link-external:hover {
    color: whitesmoke;
    transition-duration: 0.7s;
}

.link-external::after {
    content: "\2197";
}

.link-external-footer {
    color: var(--af4f-white);
    transition-duration: 0.7s;
}

.link-external-footer:hover {
    color: var(--af4f-dark-blue);
    transition-duration: 0.7s;
}

.link-external-footer::after {
    content: "\2197";
}

/* Solution Archive */
header.page-header p {
    font-size: 2.8rem;
    /*color: var(--af4f-accent-seafoam);*/
    text-align: center;
}

div.wrapper#archive-wrapper article.solution.type-solution {
    margin-block: 10px;
    padding-block: 5px;
    padding-inline: 10px;
    background-color: var(--af4f-light-grey);
    border-radius: 10px;
    /*border: 1px solid red;*/
}

div.wrapper#archive-wrapper article.solution.type-solution header img {
    background-color: var(--af4f-white);
}

/* Archive Pagination Controls */
div#archive-wrapper nav ul.pagination li.page-item.active > span.page-link.current {
    background-color: var(--af4f-dark-blue);
    border-color: var(--af4f-dark-blue);
}

div#archive-wrapper nav ul.pagination li.page-item:not(.active) > a.page-link:not(.current) {
    color: var(--af4f-dark-blue);
}

div#archive-wrapper nav ul.pagination li.page-item:not(.active) > a.page-link:not(.current)::selection,
div#archive-wrapper nav ul.pagination li.page-item:not(.active) > a.page-link:not(.current) *::selection {
    background-color: var(--af4f-dark-blue);
    color: var(--af4f-white);
}

/* Filter Set */
/* Filter Set: Chips */
div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap div.widget-title.wpc-filter-title {
    font-family: "Rubik", sans-serif;
    font-weight: 200;
}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap div.widget-title.wpc-filter-title::selection {
    background-color: var(--af4f-black);
    color: var(--af4f-white);
}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li label > span > a {
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    color: var(--af4f-dark-blue);
}

/* Filter Set: Selected chips */
div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li.wpc-term-selected label > span.wpc-filter-label-wrapper > a {
    color: var(--af4f-white);
}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li.wpc-term-selected label > span.wpc-filter-label-wrapper {
    background-color: var(--af4f-dark-blue);

}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li.wpc-term-selected label {
    border-color: var(--af4f-dark-blue);
}

/* Filter Set: Hovered on chips */
div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li label:hover > span > a {
    color: var(--af4f-white);
}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li label:hover {
    border-color: var(--af4f-dark-blue);
}

div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li label:hover > span.wpc-filter-label-wrapper {
    background-color: var(--af4f-dark-blue);
}

/* Filter Set: text selection on chips */
div#solution-filter-cluster > div.widget.widget_wpc_filters_widget > div.wpc-filters-main-wrap ul.wpc-filters-ul-list > li label > span *::selection {
    background-color: var(--af4f-dark-blue);
    color: var(--af4f-white);
}

/* Single Solution */
div.wrapper#single-wrapper div.solution-custom-field {
    margin-block: 20px;
    padding-block: 5px;
    padding-inline: 10px;
    background-color: var(--af4f-light-grey);
    border-radius: 10px;
}

div.wrapper#single-wrapper div.solution-custom-field > span.solution-custom-field-label {
    font-style: italic;
    font-weight: bolder;
}

div.wrapper#single-wrapper div.solution-custom-field.detailed_info p.solution-custom-field-value {
    white-space: pre-wrap;
    padding-inline-start: 40px;
}

/* Post Nav links */
nav.container.navigation.post-navigation > div.nav-links > span > a {
    color: var(--af4f-dark-blue);
    font-family: "Rubik", sans-serif;
    transition-duration: 0.7s;
}

nav.container.navigation.post-navigation > div.nav-links > span > a:hover {
    color: var(--af4f-light-blue);
    font-family: "Rubik", sans-serif;
    transition-duration: 0.7s;
}

nav.container.navigation.post-navigation > div.nav-links > span > a::selection,
nav.container.navigation.post-navigation > div.nav-links > span *::selection {
    background-color: var(--af4f-dark-blue);
    color: var(--af4f-white);
}

@media (max-width: 991px) {
    nav.container.navigation.post-navigation > div.nav-links > span {
        border: var(--af4f-dark-blue) solid thin;
        border-radius: 3px;
        padding-inline: 2px;
    }

    nav.container.navigation.post-navigation > div.nav-links > span:nth-child(2) {
        margin-inline: 3px;
    }

    nav.container.navigation.post-navigation {
        padding-inline: 0;
    }
}

/* Scroll-back-to-top floating button */
div#af4f-back-to-top-button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: fixed;
    z-index: 100;
    bottom: 10px;
    right: 10px;
    background-color: var(--af4f-gray-seafoam);
    opacity: 50%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition-duration: 0.7s;
}

div#af4f-back-to-top-button:hover {
    opacity: 100%;
    transition-duration: 0.7s;
}

@media (min-width: 1024px) {
    div#af4f-back-to-top-button {
        border-radius: 10px;
        bottom: 100px;
        right: 60px;
        opacity: 75%;
    }
}