/*
    Theme Name: GEO BON redesign
    Description: Used in the new design of the GEO BON home page
    Author: Valeria Gomez
    Template: twentytwentyfive
    Version: 1.1
*/

/* for the Lato font */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
    --button-bg: #DFF2F4; 
    --button-bg-dark: #BDE8E0;

    --light-green: #A2DEB6; 
    --light-green-50: #A2DEB680; 
    --dark-green: #038C7C; 
    --dark-green-50: #038C7C80; 
    --grey-green : #71AAB0;

    --lighter-blue: #F0F7FD;
    --light-blue: #9AC7F1; 
    --dark-blue: #115CA2; 

    --wp--style--global--content-size : 100% !important;
}

/* don't need this :  */
/* .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
} */

a {
    color: #038c7c;
}

a:hover {
    color: #0FBE7C;
}

body, button{
    font-family: "Lato", sans-serif;
}

/* carousel -> making it full width */
.et-db #et-boc .et-l .et_pb_section.et_section_transparent {
    margin-left: calc(-1 * var(--wp--style--root--padding-left));
    margin-right: calc(-1 * var(--wp--style--root--padding-right));
}

.et-db #et-boc .et-l .et_pb_module .homepage-title,
.et-db #et-boc .et-l .et_pb_module .homepage-statistic {
    font-weight: 600;
    font-size: 32px;
    color: var(--dark-blue); 
}

.et-db #et-boc .et-l .et_pb_module .homepage-title {
    margin-bottom: 12px;
}

.et-db #et-boc .et-l .et_pb_module p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px;
}

.et-db #et-boc .et-l .homepage-btn,  .et-db #et-boc .et-l .homepage-btn-left{
    display: flex;
    width: fit-content;
    margin: auto;
    /* margin-top: 24px; */
    padding: 16px 32px;
    background-color: var(--button-bg);
    border-radius: 15px;
    color: var(--dark-green) !important;
    font-weight: bold !important;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 4px 4px hsla(0, 0%, 0%, 0.1);
    cursor: pointer;
    transition: all ease-in-out 0.3s;
    padding-bottom: 16px !important;
}

.et-db #et-boc .et-l .homepage-btn-left {
    align-items: left;
    margin: 0;

}

.et-db #et-boc .et-l .homepage-btn:hover {
    background-color: var(--button-bg-dark);
    transform: translateY(-4px);
    box-shadow: 0 4px 4px hsla(0, 0%, 0%, 0.2);
}

.et-db #et-boc .et-l .homepage-btn:active {
    background-color: var(--dark-green);
    color: white !important;
}

.statistic {
    display: flex;
    flex-direction: column;
    text-align: center !important;
}

.et-db #et-boc .et-l .et_pb_section .subtitle {
    font-size: 20px;
    color: var(--grey-green);
    font-weight: 400;
}

.et-db #et-boc .et-l .et_pb_module .background-image {
    position: absolute;
    width: 35%;
    height: auto;
    opacity: 65%;
    z-index: -1;
    overflow: hidden;
    transition: all ease-in-out 2s;

    /* making it undraggable */
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* news and highlights */

/* .et-db #et-boc .et-l .et_pb_section .geobon-news  {
    width: 40%;
} */

/* 
.et-db #et-boc .et-l .et_pb_module {
    overflow-x: hidden;
} */

.et-db #et-boc .et-l .et_pb_section .geobon-highlights {
    width: 60%;
}

.et-db #et-boc .et-l .et_pb_section .news-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    border-radius: 15px;
    padding: 8px 12px;
    margin-bottom: 8px;
    color: var(--dark-green-50);
    transition: all ease-in-out 0.3s;
    border: 3px var(--light-green) solid; 
}

.et-db #et-boc .et-l .et_pb_section .news-card p {
    font-weight: bold;
}

.et-db #et-boc .et-l .et_pb_section .news-card:hover {
    border: 3px var(--dark-green) solid; 
    color: var(--dark-green);
    box-shadow: 0 4px 4px #00000020;
}

.et-db #et-boc .et-l .et_pb_module .news-thumbnail {
    height: 75px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.et-db #et-boc .et-l .et_pb_module a.highlight-link {
    display: block;
    line-height: 0;    
}

.et-db #et-boc .et-l .et_pb_module .highlight-image {
    height: auto;
    border-radius: 15px;
    display: block;  
    transition: all ease-in-out 0.2s;
}

.et-db #et-boc .et-l .et_pb_module .highlight-image:hover {
    box-shadow:
        0 0 0 3px hsla(0, 0%, 100%),
        0 0 0 6px var(--light-green);
}

.et-db #et-boc .et-l .et_pb_module .green-link {
    text-align: right;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 12px;
    color: var(--dark-green) !important;
}

/* WHat is a bon + get involved */

.et-db #et-boc .et-l .et_pb_section .news-highlights-section,
.et-db #et-boc .et-l .et_pb_section .bon-get-involved-section,
.et-db #et-boc .et-l .et_pb_section .explore-concepts-section {
    margin-top: 84px;
}

.et-db #et-boc .et-l .et_pb_section .what-is-bon,
.et-db #et-boc .et-l .et_pb_section .get-involved {
    width: 50%;
}

.et-db #et-boc .et-l .et_pb_section .concept-card {
    width: 33%;
    border-radius: 25px;
    border: 3px var(--light-blue) solid;
    /* box-shadow: 0 4px 4px #00000020; */
    padding: 12px 24px;
    transition: all ease-in-out 0.3s;
}

.et-db #et-boc .et-l .et_pb_section .concept-card:hover {
    border: 3px var(--dark-blue) solid;
    box-shadow: 0 4px 4px #00000020;
}

.et-db #et-boc .et-l .et_pb_module .concept-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
}

.et-db #et-boc .et-l .et_pb_module .concept-description {
    font-size: 14px;
}

/* for custom headers */
.custom-header {
    position: relative;
    text-align: center;
    color: white !important;
    font-size: 40px;

}

.et-db #et-boc .et-l .et_pb_section .custom-header-title {      
    position: absolute;
    font-weight: bold;
    top: 50%;
    transform: translate(20%, -50%);
    text-shadow: 0 4px 4px #000;
}

.et-db #et-boc .et-l .et_pb_module .custom-header img {
    width: 100%;
    height: 200px;    
    object-fit: cover; 
    display: block; 

    /* making it undraggable */
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.header-image {
    width: 130%;
    left: -15%;
    height: auto;
    margin-bottom: 24px;
    position: relative;
}

/* for divi pages */

.et_pb_text_inner {
    .header-image {
        left: 0;
    }
}

@media (max-width: 980px) {
    .et-db #et-boc .et-l .et_pb_section {
        padding: 0;
    }
}

@media (min-width: 981px) {
    .et-db #et-boc .et-l .et_pb_section {
        padding: 0;
    }
}

/* importing css for tables */

table {
    border-collapse: collapse;
}

table tr:not(:last-child) {
  border-bottom: 1px solid #999;
}

table td, table th {
    padding: 24px;
    vertical-align: middle;
    border-style: none;
}

table th {
    padding: 0 24px;
}

/* for the webinars page */
.container-card {
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0;
    height: auto;
}

.box-hover-zoom {
    background: #ffffff;
    border-radius: 0.5em;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, .05);
}

.image-thumb {
    max-width: 100%;
    height: auto;
}

.box-hover-zoom .image-thumb {
    transition: transform .3s ease;
}

.box-hover-zoom:hover .image-thumb {
    transform: scale(1.03);
    transform-origin: center;
    opacity: 0.75;
}

/* speakers */

.speakers-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    align-items: baseline;
}

.speaker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin: 1em;
    text-align: center;
    margin-bottom: 24px;
}

.speaker .aligncenter, strong, em {
    margin: 0px;
}


.speaker a {
    text-align: center;
}

.speaker img {
    border-radius: 50%;
    /* margin-bottom: 24px; */
    width: 80%;
    height: auto;
}

/* keep or delete */
/* div.speaker {   
    width: 25%;
    float: left;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
} */

/* indicators */
.indicators-list a {
    display: flex;
    align-items: center;
    margin-bottom : 16px;
}

.indicators-list a img {
    margin: 0px 30px 0px 0px;
}

.indicators-title {
    /* display: flex; */
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.indicators-image-container {
    display: inline;
    overflow: visible;
    float: left;
    padding-right: 12px;
    height: 1em;

    img {
        height: 52px;
        width: auto;
        margin-top: -4px;
        margin-left: 0;
    }

    .alignleft {
        margin: 0;
    }
}

.logos-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:24px;
    align-items: center;
}


/* for images */
/* https://geobon.org/geo-bon-announces-official-endorsement-of-move-bon-advancing-biodiversity-monitoring-through-animal-movement/ */

.aligncenter {
    display: flex;
    /* clear: both; */
    margin: auto;
    flex-direction: column;
    margin-bottom: 24px;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 30px;
}

.wp-caption-text {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-style: italic;
    text-align: center;
    color: grey;
}

/* emails */
.email {
    background: no-repeat url(https://geobon.org/wp-content/uploads/2026/05/download.png);
    padding-left: 30px;
}

.email span {
    display: none;
}

/* for separators */
hr, .wp-block-separator {
    background-color: #eaeaea;
    border: 0;
    height: 1px;
    margin: 30px;
}

/* for what used to be collapsing toggles */
h2, .toggle-title {
    margin-top: 40px;
    line-height: 150%;
    padding-bottom: 12px;
    border-bottom: 3px #005EA7 solid;
}

/* for the hexagons (so there's no horizontal scroll bar)*/
html, body {
    overflow-x: hidden;
}

.et-db #et-boc .et-l .et_pb_section .et_pb_row {
    overflow-x: visible;
}

/* buttons */
button {
    color: #FFFFFF;
    display: inline-block;
    padding: 5px 25px;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    background-color: #038c7c;
    border: 0;
    border-radius: 3px;
    font-size: 16px;
}


/*######################*/
/* GEO BON custom fonts */
/*######################*/

@font-face {
  font-family: "biab";
  src: url("https://geobon.org/wp-content/themes/geobon-child/fonts/biab.eot");
  src: url("https://geobon.org/wp-content/themes/geobon-child/fonts/biab.eot?#iefix") format("embedded-opentype"), url("https://geobon.org/wp-content/themes/geobon-child/fonts/biab.woff") format("woff"), url("https://geobon.org/wp-content/themes/geobon-child/fonts/biab.ttf") format("truetype"), url("https://geobon.org/wp-content/themes/geobon-child/fonts/biab.svg#biab") format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "biab" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "biab" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-size:40px;
	margin:15px;
}
.icon-ico-01:before {
  content: "a";
}
.icon-ico-02:before {
  content: "b";
}
.icon-ico-03:before {
  content: "c";
}
.icon-ico-04:before {
  content: "d";
}
.icon-ico-05:before {
  content: "e";
}
.icon-ico-06:before {
  content: "f";
}
.icon-ico-07:before {
  content: "g";
}
.icon-ico-08:before, .icon-ico-tree:before {
  content: "h";
}
.icon-ico-09:before, .icon-ico-genes:before {
  content: "i";
}
.icon-ico-10:before, .icon-ico-birds:before {
  content: "j";
}
.icon-ico-11:before {
  content: "k";
}
.icon-ico-12:before {
  content: "l";
}
.icon-ico-13:before {
  content: "m";
}
.icon-ico-14:before {
  content: "n";
}
.icon-ico-15:before {
  content: "o";
}
.icon-ico-16:before {
  content: "p";
}
.icon-ico-17:before {
  content: "q";
}
.icon-ico-18:before {
  content: "r";
}
.icon-ico-19:before {
  content: "s";
}
.icon-ico-20:before {
  content: "t";
}
.icon-ico-21:before {
  content: "u";
}
.icon-ico-22:before {
  content: "v";
}
.icon-ico-23:before {
  content: "w";
}
.icon-ico-24:before {
  content: "x";
}
.icon-ico-25:before {
  content: "y";
}
.icon-ico-26:before {
  content: "z";
}
.icon-ico-27:before {
  content: "A";
}
.icon-ico-28:before {
  content: "B";
}
.icon-ico-29:before {
  content: "C";
}
.icon-ico-30:before {
  content: "D";
}
.icon-ico-31:before {
  content: "E";
}
.icon-ico-32:before {
  content: "F";
}
.icon-ico-33:before {
  content: "G";
}
.icon-ico-34:before {
  content: "H";
}
.icon-ico-35:before {
  content: "I";
}
.icon-ico-36:before {
  content: "J";
}
.icon-ico-37:before {
  content: "K";
}
.icon-ico-38:before {
  content: "L";
}
.icon-ico-39:before {
  content: "M";
}
.icon-ico-40:before {
  content: "N";
}
.icon-ico-41:before {
  content: "O";
}
.icon-ico-42:before {
  content: "P";
}
.icon-ico-43:before {
  content: "Q";
}
.icon-ico-44:before {
  content: "R";
}
.icon-ico-45:before {
  content: "S";
}
.icon-ico-46:before {
  content: "T";
}
.icon-ico-47:before {
  content: "U";
}
.icon-ico-48:before {
  content: "V";
}

/* for inline images */
.alignleft {
    display: inline;
    float: left;
    margin-right: 30px;
}

/* for icons in /ebvs/what-are-ebvs/ */
.tab-icon {
    font-family: 'biab';
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    color: #005EA7;
    display: block;
}

.icon-table-container {
    display: flex; 
    align-items: center; 
    gap: 12px;
}

.inline-icon {
    font-family: 'biab';
    font-size: 32px;
}

/* to center icons */
.et-db #et-boc .et-l .et_pb_tabs_controls li {
    padding-top: 12px;
}

/* turns icons white when clicked */
.et-db #et-boc .et-l .biab-tabs .et_pb_tabs_controls .et_pb_tab_active a:before {
    color:white;
}

/* MENU FOR PHONES */

.wp-block-navigation__responsive-container.is-menu-open .has-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
    flex-basis: 100%;
    position: static !important;
    box-shadow: none;
    border: none;
    border-left: 2px solid #009077;
    padding-left: 16px;
    width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child .has-child > .wp-block-navigation__submenu-container {
    display: none;
    position: static !important;
    box-shadow: none;
    border-left: 2px solid #00907760;
    padding-left: 16px;
    width: 100%;
}

/* removing box around menu buttons */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus:not(:focus-visible),
.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle:focus:not(:focus-visible),
.wp-block-navigation__responsive-container .wp-block-navigation-item a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* for phones and tablets */
@media (max-width: 980px) {
    p {
        font-size: 16px;
    }

    /* for homepage margins */
    .et-db #et-boc .et-l .et_pb_section .et_pb_row {
        width: 80% !important;
    }

    /* scrollbar */
    html {
        overflow: -moz-scrollbars-vertical; 
        overflow-y: scroll;
    }

    .homepage-stats{
        .columns {
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }
    }

    .speaker {
        width: 50%;
        gap:0px;
    }

    table {
        font-size: 16px;
        width: 90%;
        display: block;
        overflow-x: auto;
        border-radius: 10px;
        box-shadow: inset 0 0 5px var(--light-green-50);
        scrollbar-color: var(--dark-green-50) var(--light-green-50);
        scrollbar-width: auto;
    }

    table td, table th {
        padding: 12px;
        vertical-align: middle;
        border-style: none;
    }

    /* for images in governance documents */
    html :where(img[class*=wp-image-]) {
        height: auto;
        width: 100%;
    }

    .has-global-padding {
        padding-right: 0;
        padding-left: 0;
        max-width: 85%;
        margin: auto;
    }

    iframe {
        width: 100%;
    }

    /* for tabs in divi */
    #et_builder_outer_content > div > div > div > div.et_pb_row.et_pb_row_1 > div > div.et_pb_module.et_pb_tabs.et_pb_tabs_0.biab-tabs.et_pb_tabs_vertically_stacked > ul {
        display: flex;
        overflow: scroll;
    }

    .et_pb_tab_content {
        table {
            width: 100%;
        }
    }
}



/* for phones only */
@media (max-width: 480px) {
    .columns { 
        flex-direction: row;
        gap: 36px;
    }

    .et-db #et-boc .et-l .et_pb_module .homepage-statistic {
        font-size: 24px;
    }

    .et-db #et-boc .et-l .et_pb_section .subtitle {
        font-size: 16px;
    }

    /* eliminating the big margins */
    .has-global-padding {
        max-width: 97%;
    }

    .wp-block-site-logo img {
        max-width: 70%;
    }

    .header-image {
        height: 200px;
        width: auto;
        overflow: hidden;
        padding-left: 11%;
    }
}