/*
 Theme Name:   Dagora Community Hub Site Theme
 Description:  Site theme for Dagora SA, including AI community tools, enhanced event handling and display as well as integrations for reports and spaces.
 Author:       Matt Bedford
 Author URI:   https://mattbedford.com
 Template:     generatepress
 Version:      3.6.0
*/

/*GLOBALS*/
html {
    scroll-behavior: smooth;
}
.full-viewport {
    max-width:100%;
    margin-left: 2rem;
    margin-right:2rem;
}

@media screen and (min-width:900px) {
    /* expand nav width*/
    .inside-header.grid-container {
        max-width:unset;
        padding-left:104px !important;
        padding-right:calc(104px + 210px) !important; /*gap on right same size as logo*/
    }

    /* Center main nav - desktop */
    .nav-float-right #site-navigation {
        margin-left: auto;
        margin-right: auto;
    }
    #menu-main-nav {
        gap:4rem;
    }
    #menu-main-nav a {
        text-transform:uppercase;
    }

    nav.has-sticky-branding.main-navigation.sub-menu-right {
        margin:0 auto;
    }

    /*Nav user-burger icon dropdown*/
    /* Main container positioning */
    .nav-login-menu-wrap {
        position: absolute;
        display: block;
        right:45px;
        top:5px;
    }
    .nav-login-menu-wrap {
        border:1px solid var(--mid);
        display:flex;
        border-radius:100px;
        line-height:0px;
        margin-left: 126px; /* on large screen, counting width of main logo*/
    }
    .nav-login-menu-wrap svg {
        fill:var(--contrast-3);
        color:var(--contrast-3);
        width:30px;
    }

}

/*HOME*/
/*hero-text*/
#word-play-1 {
    display:block;
}
.fade-word {
    transition: opacity 0.15s ease;
    display: inline-block;
}
.fade-out {
    opacity: 0;
}

/*Slider hero*/
.feature-slider-wrapper {
    flex-direction:row !important;
}
#feature-slider {
    width:100%;
}

#feature-slider img {
    width:100%;
    min-width:25vw;
    min-width: 25dvw;
    height:650px;
    object-fit:cover;
    border-radius:6px;
}

#feature-slider .slider-cap {
    box-sizing:border-box !important;
    position:absolute;
    top:5%;
    left:5%;
    width:80%;
    background:rgba(0,0,0,0.53);
    border-radius:5px;
    padding:8px 12px;
    color:var(--base);
    min-height:15%;
}

.home-hero-wrapper .swiper-slide {
    position:relative;
}
.home-hero-wrapper .swiper-wrapper figure img {
    min-width:22vw;
    border-radius:8px;
}
.home-hero-wrapper .swiper-slide p.gb-text {
    display:block;
    box-sizing:content-box;
    position:absolute;
    top:1rem;
    left: 1rem;
    right:1rem;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(5px);
    border-radius:5px;
    max-width:82%;
    padding:5px 8px;
    color:white;
}


/*LOGOS*/

/*BRAND LOGOS*/

.brand-wrapper {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.brand-wrapper .brand-logo {
    flex: .5 1 25% !important;
    margin:25px;
}


/*Container gets a background
and inherits a max width from elsewhere. */
.brand-logo {
    width:80%;
    background:var(--base-2);
}

/*Image is wrapped inside a link which is
aligned to center. */
.brand-logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius:4px;
    padding:20px !important;
}
/*Set image to block display and set its width only
for a more-controlled padding. */
.brand-logo img {
    display: block;
    max-width: 100%;
    width: 320px;
    filter:grayscale(1) contrast(1);
}
/*If supported we can contain it and add a height
to fix any long and think logos. */
@supports (object-fit:contain) {
    .brand-logo img {
        height: 7rem;
        object-fit: contain;
    }
}
/*Kill any white bgr on jpegs. */
.brand-logo img[src$=".jpg"],
.brand-logo img[src$=".png"] {
    mix-blend-mode: multiply;
}


/*buttons / similar*/
.gbp-button--primary,
.gbp-button--secondary,
button,
.button {
    border-radius: 100px !IMPORTANT;
    padding:12px 20px !IMPORTANT;
    font-size:1rem !IMPORTANT;
    font-weight:600 !IMPORTANT;
    cursor:pointer !important;
}



/*HIDING CLASS*/
.hidden {
    display:none !important;
}


.site-logo.page-hero-logo img,
.site-logo img.is-logo-image {
    width:210px;
}


/* Icons styling */
.icons-wrap {
    display: flex;
    width:100%;
    align-items: center;
    justify-content:center;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 100px;
    transition: background-color 0.2s ease;
}

.icons-wrap:hover {
    background-color: var(--base-2);
}

li.innoboost.menu-item a {
    position:relative;
    color:var(--accent-purple);
}
li.innoboost.menu-item a::after {
    display:block;
    position:absolute;
    content:url(/wp-content/uploads/box-arrow-up-right-2.svg);
    top:-1px;
    right:-35px;
    width:30px;
}

/* Dropdown menu styling */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--base-2);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Show dropdown when active */
.nav-login-menu-wrap.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown list styling */
.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.dropdown-list li {
    margin: 0;

}

.dropdown-list a {
    display: block;
    padding: 20px 16px;
    text-decoration: none;
    color: var(--contrast-2);
    transition: background-color 0.2s ease;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
}

.dropdown-list a:hover {
    background-color: var(--base-2);
}


/*Prefooter bgr override*/

.gbp-section.gb-element-96acf944 {
    background-blend-mode: normal;
    background-image: linear-gradient(180deg,var(--color-light-3) 50%,var(--color-dark) 50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: -1px;
    margin-top: 6rem;
    padding-bottom: 0rem;
    padding-top: 0rem
}

/*Membership-join us page*/


.membership-benefit-card {
    transition: all 0.2s ease;
}

.membership-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(234, 88, 12, 0.1);
    border-color: var(--accent-purple);
}

.membership-benefit-card:hover > div {
    background:var(--accent-purple);
    transition: all 0.2s ease;
}
.membership-benefit-card:hover > div svg {
    color:var(--color-light-3);
    transition: all 0.2s ease;
}