/*
 Theme Name:     nawbo
 Theme URI:      https://www.nawbo.org/
 Description:    NAWBO Theme
 Author:         knoodle
 Author URI:     https://www.nawbo.org
 Template:       Divi
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/*================
 * 2023-11-07
 * WEBSITE - FONT STYLES
 * Must be defined at the top of the stylesheet.
 *================*/
@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');

/*================
 * 2024-02-06
 * Styles to change display of Featured Events slider for Featured Events section
 * Could be seen on nawbo.org
 * JB
 *================*/
.owl-carousel.row,
.owl-carousel > .owl-stage-outer,
.owl-carousel .owl-item article > .row {
    margin: unset!important;
}

.owl-carousel > .owl-stage-outer,
.owl-carousel .owl-item {
    cursor: grab;
}

.owl-carousel .owl-item article > .row {
    position: relative;
}

.owl-carousel > .owl-stage-outer,
.owl-carousel .owl-item:active {
    cursor: grabbing;
}

.owl-carousel .owl-item article > .row > div[class*="col"] {
    width: 100%;
    height: 100%;
    padding: 5rem 0;
}

.owl-carousel .owl-item article > .row > div[class*="col"] > div[class*="detail"] {
    color: #000000;
    font-weight: 600;
}

.owl-carousel .owl-item article > .row > div[class*="image"] {
    position: absolute;
    padding: unset;
    margin: unset;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.owl-carousel .owl-item article > .row > div[class*="image"] > a,
.owl-carousel .owl-item article > .row > div[class*="image"] > a > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.5;
    max-width: unset;
}


/*================
 * 2024-01-29
 * Left align title for blog/news page.
 * Could be seen on nawbo.org/news.
 * JB
 *================*/
#page-container .layout-left-align-titles h4 {
    text-align: left;
}


/*================
 * 2024-01-22
 * Accessibility Widget Position Fix.
 * Style for Accessibility Widget being stuck behind the top navigation.
 * Could be seen on nawbo.org.
 * Styles to increase 'top' declaration.
 * JB
 *================*/
nav#pojo-a11y-toolbar {
    top: 178px !important; /*was 146px, applied by indexed <style>*/
}


/*================
 * 2023-12-21
 * CHAPTER SITE GLOBAL STYLE!!!
 * Style for /partners
 * for loop layout of the partner blurbs
 * JB
 *================*/
div.partner_blurb_container img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 100%;
}

/*================
 * 2023-12-20
 * CHAPTER SITE GLOBAL STYLE!!!
 * Style for /about + /leadership
 * for loop layout of the biographies
 * JB
 *================*/
div.leadership_member_blurb {
    padding: unset;
    margin-bottom: 5vh;
}

div.leadership_member_blurb img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
}

/*================
 * 2023-12-20
 * BLOG-ARTICLE-GRID LAYOUT STYLES
 * JB
 *================*/
div.blog_post_grid_item_layout {
    padding: unset;
    margin-bottom: 2.5vh;
}

div.blog_post_grid_item_layout img {
    aspect-ratio: 3/2;
    object-fit: cover;
    width: 100%;
    max-width:400px;
}

/*================
 * 2023-12-18
 * MEMBER DIRECTORY OVERLAY FIX
 * Styles to overwrite overlay on member directory, for when the share button is pressed, it gets in the way.
 *================*/
#page-container #gzns .modal {
    position: absolute;
    z-index: 100000000;
}

#page-container #gzns .modal .modal-dialog {
    z-index: inherit;
}

body:has(#gzns) .modal-backdrop {
    display: none;
    z-index: 100!important;
}

#gzns {
    min-height: 50vh;
}

#page-container #gzns .modal-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

#page-container #gzns .modal-body > a {
    flex-basis: calc(50% - 1rem);
}

#page-container #gzns .et_builder_inner_content {
    z-index: 2;
}

#shareModal {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*2023-12-20 timestamp*/

#page-container #gzns .gz-modal {
    width: 90%;
    position: absolute;
}

/*================
 * 2023-12-04
 * PARTNERS ARCHIVE LOOP STYLES
 * Styles to overwrite Divi Machine's grid layout option.
 *================*/
/* /partners */
#nawbo_partners .divi-filter-archive-loop .grid-posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.category-loop .et_pb_section:has(.no-results-layout) {
    display: none;
}

/*================
 * 2023-11-09
 * GRAVITY FORMS - VALIDATION MESSAGE STYLES
 * Styles to overwrite Gravity Forms validation error messages.
 *================*/
#page-container .gform_validation_errors * {
    font-size: 1.15rem;
    line-height: normal;
}

/*================
 * 2023-11-08
 * WEBSITE - ADAPTIVE IMAGE CLASS
 * Apply this class to Divi Image modules to make images fill 100% of its container (column). 
 * "Equallize Column Height" must be switched ON in the Row settings.
 * The Column that the image is in must have a display of "flex."
 *================*/
.adaptive-image,
.adaptive-image .et_pb_image_wrap,
.adaptive-image img {
    object-fit: cover;
    height: 100%;
}


/*================
 * 2023-11-07
 * WEBSITE - HEADER NAVIGATION STYLES
 *================*/
/*Remove main nav box shadow.*/
#main-header {
    box-shadow: none;
}

/*Main Nav logo bottom spacing*/
#main-header .logo_container{
    padding-bottom:1%;
}

#main-header .logo_container img {
    padding-bottom: 5px;
}

/******************
 * social
 * ***************/
.social a img{width:16px; height:16px;}


/*================
 * Membership Page - Benefits of Joining Button Alignment.
 * 2022-12-02
 *================*/
.button-adjustment
.et_pb_button_module_wrapper{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
}

.button-adjustment.centered
.et_pb_button_module_wrapper{
    align-items:center;
}
@media only screen and (max-width: 980px){
    .button-adjustment
.et_pb_button_module_wrapper {
    align-items: center;
}
}


/*================
 * 2023-11-07
 * NEW STANDARD FONT SIZE
 * We are replacing our FLIUD TYPOGRAPHY with fixed values.
 * New styles are based on this website: https://typescale.com/
 *
 * 2024-02-28
 * Commenting out styles for the sake of Divi. These styles would overwrite Divi module settings, rendering Divi useless.
 * Instead, I will set these styles to be the default within the Divi settings.
 *================*/
/* DIVI DEFAULT MEDIA QUERY - TABLET
 * 2023-11-08
 * Base Size: 16px
 * Scale: 1.250 - Major Third
 */
/*
#page-container a, #page-container li, #page-container span {font-size: inherit;}
#page-container p {font-size: 1rem;}
*/
/*Test for making it possible for this style to be overwritten by Divi module settings. Doesn't quite work.*/
/*#page-container div:not([class*="et_pb_text"]) > div > p {font-size: 1rem;}*/
/*
#page-container h6 {font-size: 1.15rem;}
#page-container h5 {font-size: 1.25rem;}
#page-container h4 {font-size: 1.563rem;}
#page-container h3 {font-size: 1.953rem;}
#page-container h2 {font-size: 2.441rem;}
#page-container h1 {font-size: 3.052rem;}
*/

/* DIVI DEFAULT MEDIA QUERY - TABLET
 * 2023-11-08
 * Base Size: 16px
 * Scale: 1.200 - Minor Third
 */
@media only screen and (max-width: 980px){
    #page-container a, #page-container li, #page-container span {font-size: inherit;}
    #page-container p {font-size: 1rem;}
    #page-container h6 {font-size: 1.125rem;}
    #page-container h5 {font-size: 1.2rem;}
    #page-container h4 {font-size: 1.44rem;}
    #page-container h3 {font-size: 1.728rem;}
    #page-container h2 {font-size: 2.074rem;}
    #page-container h1 {font-size: 2.488rem;}
}
/* DIVI DEFAULT MEDIA QUERY - MOBILE
 * 2023-11-07
 * Base Size: 16px
 * Scale: 1.125 - Major Second
 */
@media only screen and (max-width: 767px){
    #page-container a, #page-container li, #page-container span {font-size: inherit;}
    #page-container p {font-size: 1rem;}
    #page-container h6 {font-size: 1.08rem;}
    #page-container h5 {font-size: 1.125rem;}
    #page-container h4 {font-size: 1.266rem;}
    #page-container h3 {font-size: 1.424rem;}
    #page-container h2 {font-size: 1.602rem;}
    #page-container h1 {font-size: 1.802rem;}
}

/* Modified Exceptions */

/* Blog Module - Titles *//*INTERFERENCE: I WAS IN THE PROCESS OF REMOVING THE IMPORTANT SELECTOR, BUT FOUND MORE INTERFERENCE IN DIVI MACHINE STYLESHEET*/
#page-container h2.entry-title {font-size:clamp(1.375rem, 0.2vw + 1.25rem, 1.5rem);}/*----22px - 24px*/

/* Divi Builder UI (such as 'Add From Library' menu) */
#page-container .et-fb-settings h1,
#page-container .et-fb-settings h2 {font-size: 18px!important;}
#page-container .et-fb-settings h3 {font-size: 14px!important;}
#page-container .et-fb-settings h4 {font-size: 13px!important;}


/*===CONCLUDE NEW STANDARD FONT SIZE===*/



/* =JB. 
DIVI SLIDER ARROWS STYLES
Overwrite for Divi Slider Module, arrows on hover show up small due to the FLUID TYPOGRAPHY STYLES.

------------------------------------------------------------------------------------------------- */
#page-container .et-pb-slider-arrows > a:before {font-size: 3rem;}
/*-----------END DIVI SLIDER ARROWS STYLES----------------*/


/* =JB. 
FOOTER GIANT HORIZONTALLY SCROLLING TEXT
We took this idea form the Salient theme -giant text that scrolls acroos the screen-
and placed it in the footer, at the very bottom of each page.

These are the styles for it.
------------------------------------------------------------------------------------------------- */

/*Styles for containing element*/
.footer-scroll-txt-wrapper {width:100%; max-width: 100%; overflow: hidden;}

/*Applied animation to the scrolling element*/
.footer-scroll-txt-marquee {
    white-space: nowrap;/*-----------------------text will not wrap to new line, and will run off the screen*/
    overflow: hidden;/*--------------------------removes the scrollbars given when width is larger than the containing element/screen*/
    display: inline-block;/*---------------------this is necessary to make this work*/
    animation: marquee 60s linear infinite;}/*---this applies the Keyframes 'marquee' located below*/

/*Text styles for the words in the scroller*/
#page-container .footer-scroll-txt-marquee p{
    display: inline-block;
    font-size:6em!important;
    line-height:normal;
    font-family: 'Abril Fatface',display;
    padding:0.5em 0px;
    color:#ffffff;
}

/*Alternate (hollow) text styles for the words in the scroller*/
.footer-scroll-txt-marquee p span {
    -webkit-text-stroke: 2px white;
    -webkit-text-fill-color: transparent;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/*-----------MEDIA QUERIES AT BOTTOM OF DOCUMENT-------------------------*/
/*-----------END FOOTER GIANT HORIZONTALLY SCROLLING TEXT----------------*/

/* 2023-05-18
Can be seen on 'archive' type pages.
This was specifically used for /chicago/blog/partner-type/corporate */
/*.archive .type-partner img {
    object-fit: contain;
}*/




/* 2023-05-18
Fix Google Translate widget cutting off logo */
#google_translate_element 
.goog-te-gadget
.goog-te-gadget-simple > span > a {
    padding: unset;
    font-size: 12px;
}



/* 2023-05-18
Fix logo animation, from poppy to smooth */
#top-menu li a {
    transition: all 0.4s ease-in-out;
}



/* =JB.
TABLET MEDIA QUERIES ≤980px
2023-02-15
------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width:980px){

    /*FOOTER GIANT HORIZONTALLY SCROLLING TEXT*/
    #page-container .footer-scroll-txt-marquee p,
    #page-container .footer-scroll-txt-marquee {font-size: 2em!important;}
}
/*-----------END TABLET MEDIA QUERIES ≤980px----------------*/



/* =JB.
MOBILE MEDIA QUERIES ≤767px
2023-02-15
------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width:767px){}
/*-----------END MOBILE MEDIA QUERIES ≤767px----------------*/


/* 
JF
Footer Menu Deconstruction
2023-05-29 
*/
footer .et_pb_menu, footer .et_pb_menu .sub-menu {background-color: transparent !important;}
footer .et_pb_menu a{color: #fff;}
footer .et_pb_menu li{width: 100%;}
footer .et_pb_menu .et_pb_menu__menu, footer .et_pb_fullwidth_menu .et_pb_menu__menu{display: flex !important;}
footer .et_mobile_nav_menu, footer .et_pb_menu .sub-menu{ display: none !important; }


/** menu styles **/
#menu-001-main-menu-1>li {
    padding-right:0rem;
    
}
#menu-001-main-menu-1 li a{
    font-size: clamp(12px, 5vw - 2.75rem, 16px) !important;
}
.nav li li ul {
left:220px;
}

#menu-001-main-menu-1 .sub-menu a {
    line-height: 1.2rem;
}

#page-container #menu-001-main-menu-1 .sub-menu a:hover {
    background-color: #FFFFFF;
    color: #006666!important;
}


/* =JB.
2023-10-26
FOOTER GRAVITY FORM COLOR CORRECTION
------------------------------------------------------------------------------------------------- */
footer .gform_confirmation_message {
    color: #FFFFFF;
}
/*-----------END FOOTER GRAVITY FORM COLOR CORRECTION----------------*/



/* Fix for events menu spacing */

@media only screen and (min-width: 1350px){
.et-db #et-boc .et-l .et_pb_section {
    padding: 0 0 !important;
}
}

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


/******************************************
 * ICS Calendar Styles
 *****************************************/
.ics-calendar.layout-basic .events{
  display:flex;
  gap: 1.5rem;
  justify-content: center;
}
#page-container .ics-calendar.layout-basic .event{
  display:flex;
  flex-direction: column;
  max-width: 300px;
  justify-content: flex-end;
}
#page-container .ics-calendar.layout-basic .event-info{
  display:flex;
  flex-direction: column;
}

#page-container .ics-calendar.layout-basic .date {
  position:absolute;
  z-index:99;
  margin: unset;
  bottom: 0;
  width: 80px;
  /*background: #FFDBA6;*/
  border: unset;
  /*color: #006666;*/
}

#page-container .ics-calendar.layout-basic .descloc{
    margin-bottom: 0.5rem;
}

#page-container .ics-calendar.layout-basic .attach_float{
  float: none;
  margin: unset;
  max-width: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);
  background-image: url(https://nawbo.org/wp-content/uploads/2022/11/nawbo-mark-transparent.png);*/
}

#page-container .ics-calendar.layout-basic .attach img{
  width: 100% !important; /*important to overide inline styles*/
  height: 210px !important; /*important to overide inline styles*/
  object-fit: cover;
  border-radius: 5px;
}
.ics-calendar.layout-basic .time{
order:1;
margin-left: 90px;
}
.ics-calendar.layout-basic .title{
order:2;
margin-left: 90px;
height: 50px;
overflow: hidden;
}

.ics-calendar.layout-basic .location{
display:none;
}
.ics-calendar.layout-basic .eventdesc {
  display:none;
}

.et_pb_bg_layout_dark h3{
    color:#fff;
}

.ads_slider .et-pb-arrow-prev, .et-pb-arrow-next{color:rgba(0,0,0,.2);}


/*================
 * 2024-01-22
 * Events Calendar rendering fixes.
 * Style for Tribe Bar list items. Showing dot, but not supposed to.
 * Could be seen on nawbo.org/events. Under heading "All Upcoming Events" beside "Find Event" button.
 * Styles to remove dots.
 * JB
 *================*/
header.tribe-events-header .tribe-events-c-view-selector__content > ul, header.tribe-events-header .tribe-events-c-top-bar__nav > ul {
    list-style-type: none;
}

/* =JB.
EVENTS CALENDAR PLUGIN OVER-WRITES
The Events Calendar Plugin has default styles that need to be changed.
This includes styles for the event views (month layout, list layout, photo layout, etc.) and the individual event page layouts.
------------------------------------------------------------------------------------------------------------------------------- */
/*Events Calendar wrapper > first div*/
.tribe-events>div{
    padding:2.5% 0%!important;
} /*changes padding*/

/*Various h3 elements on the event viewer*/
.tribe-events h3{
    font-size:clamp(1.4rem, 0.3vw + 1.4rem, 1.6rem)!important;
} /*reduces size*/

/*titles found on the month view*/
h3.tribe-events-calendar-month__calendar-event-title{
    font-size:clamp(1rem, 0vw + 1rem, 1rem)!important;
} /*reduces size*/

/*Title in modal pop-up when hovering on event in the month view*/
h3.tribe-events-calendar-month__calendar-event-tooltip-title{
    font-size:clamp(1.2rem, 0.1vw + 1.2rem, 1.3rem)!important;
} /*reduces size*/

/*Event page wrapper*/
.tribe-events-pg-template{
    padding:5%!important;
} /*changes padding*/

/*Event page heading*/
.tribe-events-pg-template h1{
    font-size:clamp(2.1rem, 0.9vw + 1.9rem, 2.4rem)!important;
} /*changes font size (smaller)*/

/*Event page small headings*/
.tribe-events-pg-template h2{
    font-size:clamp(1.7rem, 0.5vw + 1.6rem, 2rem)!important;
} /*changes font size (smaller)*/

/*Styles for 'meta' sections below event content. It includes 'details, organizer, and venue.'*/
.tribe-events-event-meta.primary h2,
.tribe-events-event-meta.secondary h2{
    font-size:clamp(1.2rem, 0.1vw + 1.2rem, 1.3rem)!important;
} /*changes font size (smaller)*/

/*-----------END EVENTS CALENDAR PLUGIN OVER-WRITES----------------*/

body[class*="tribe"] #nawbo_main_menu,
body[class*="tribe"] #nawbo_main_menu .et-menu-nav,
body[class*="tribe"] #nawbo_main_menu .et-menu-nav .et-menu {
    width: 100%;
}

/* get rid of bullets on event pagination */
li.tribe-events-nav-previous, li.tribe-events-nav-next{
    list-style-type:none;
}

/* fix font size of related events title */
.tribe-related-events-title{
    font-size:1.2em !important;
    line-height:1.1em !important;

}

/*================
 * 2024-02-22
 * Events Calendar rendering fixes (02).
 * Styles for single Event pages. Improper spacing on left and right/flesh with edge of screen.
 * Could be seen on any TEC event.
 * Styles add spacing/adjust width of elements.
 * JB
 *================*/
 #tribe-events-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
 }

#tribe-events-content .tribe_events {
    justify-content: center;
}

#tribe-events-content > :not(.tribe_events),
#tribe-events-content .tribe_events .tribe-events-content ~ [class*="tribe"] {
    width: 80%;
    max-width: 1440px;
}

/*================
 * 2024-03-04
 * Shrink Featured Image on Single Events Pages.
 * Could be seen on any TEC event.
 * JB
 *================*/
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
    width: 80%;
}
.tribe-events-event-image img {
    width: 70%;
    margin: auto;
}
/*===CONCLUDE===*/



/* blog search results from facetwp listings */
.fwp-featured-image{
    border-radius:1em;
    margin-bottom:.6em;

}
.fwp-post-title, .fwp-post-title a{
    color:#006666;
    font-size:.7em;
    line-height:1em;
    margin-bottom:.6em;
    max-width:400px;
}
.fwp-post-date, .fwp-post-date a{
    color:#999999;
    font-size:.5em;
    line-height:.7em;
    max-width:400px;
}


/*================
 * 2024-03-04
 * Mobile Menu Styles
 * Styles for displaying 'Secondary Menu' items in the Main menu for mobile/small screens.
 * We actually just put menu items on the main menu, and applied a class to those items. We aren't really merging the two menus together.
 * JB
 *================*/
@media only screen and (min-width: 980px){
    #nawbo_main_menu .mobile_only {
        display: none;
    }
}

/*===CONCLUDE===*/

/*================
 * 2024-03-21
 * Footer on Event Pages
 * Styles for fixing the footer.
 * JB
 *================*/
body.tribe_events-template-default footer .et_pb_row_0_tb_footer {
    max-width: 1440px;
}

/**==============
 * 2024-05-03-jf
 * Remove Calendar Subscribe links from single view
 * ==============*/
.single-tribe_events .tribe-events .tribe-events-c-subscribe-dropdown__container{
    display:none !important;
}

/**==============
 * 2024-05-03-jf
 * Style category links on events list
 * ==============*/
.tribe-events-calendar-list .tribe-event-categories li {
    display: inline;
    border: 1px solid #016665;
    background-color: #016665;
    padding: 3px 9px;
    border-radius: 30px;
    margin-right: 3px;
    font-size: 0.8em;
}
.tribe-events-calendar-list .tribe-event-categories li:hover {
    background-color: #fff;
}
.tribe-events-calendar-list .tribe-event-categories li a {
    color: #fff !important;
}
.tribe-events-calendar-list .tribe-event-categories li:hover a {
    color: #016665 !important;
}


.mn-subscribe-show {
    color: #FFFFFF!important;
}
/*===CONCLUDE===*/

/**==============
 * 2024-06-03-jb
 * Style Chapter/National buttons on /events
 * ==============*/
#legend_box,
#legend_box #legend,
#legend_box #legend li,
#legend_box #legend li a {
    display: block;
}

#legend_box #legend {
    padding: unset;
    display: flex;
    gap: 8px;
}

#legend_box #legend li {
    padding: unset;
    margin: unset;
    border: unset;
    background: unset;
}

#legend_box #legend li a {
    padding: 8px 12px;
    margin: unset;
    border: 1px solid #d5d5d5;
    border-radius: 25px;
    font-size: 12px;
    font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
    box-sizing: border-box;
}

#legend_box #legend li a:hover {
    padding: 7px 11px;
    border-color: #141827;
    border-width: 2px;
    background-color: #f7f6f6;
}

.tribe-common--breakpoint-medium .tribe-filter-bar--horizontal.tribe-filter-bar, #content-area .tribe-events-header__events-bar {
    margin-bottom: 8px;
}

#content-area .tribe-filter-bar__filters-slider-wrapper {
    margin-top: 16px;
}

html:has(link[href~="https://nawbo.org/events/category/chapter"]) .tribe-events-category-chapter a {
    font-weight: 700;
}

html:has(link[href~="https://nawbo.org/events/category/national"]) .tribe-events-category-national a {
    font-weight: 700;
}