/*
Theme Name: Hydrogen
Theme URI: http://gantry.org
Author: Tiger12, LLC
Author URI: http://tiger12.com
Description: Default Gantry 5 theme. Provides a simple, clean and fast design to get you started on developing your own theme or setting up a quick new site
Version: 5.5.25
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
originalCreator: RocketTheme (Gantry Framework)
currentDeveloper: Tiger12, LLC
*/

/* Navigation Styling */
.g-offcanvas-toggle .fa-fw {color: #42bfb7;}

@media only screen and (max-width: 768px) {
.logo .g-content {max-width:200px; margin: 0 auto;}
}
.pad-large {
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.faq-container {
    background: #42bfb7;
    color: white;
    text-align: center;
    font-size:smaller;
}
.faq-container strong, .faq-container h3 {color:white;}
.faq-container h3 {text-transform: uppercase;}

#g-footer .g-content {
    padding: 0;
    font-size: smaller;
}

/* HERO STYLING */
.join {
    font-weight: bold;
    margin: 20px;
    display: block;
    text-transform: uppercase;
    }
 a.join {color: #282a2d !important;}   
 .join:before {content:'>>> ';}
  .join:after {content:' <<<';}  
 a.join:hover{opacity:.5;} 

/* SEARCH ROLES STYLING */
.no-pad, .no-pad .g-content, #g-main.no-pad {margin-top:0;padding-top:0;}
.fullbg {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #42bfb7;
}
.register p {font-size: small; margin:0;}
.register .um_block_18_28 {padding:0;}
#crew-search-form {
    width: 75%;
    max-width:400px;
    margin: 0 auto;
    display: grid;
        justify-items: center;
    grid-template-columns: 1fr;}

  #crew-search-form label strong {color:#fff; text-transform: uppercase; font-weight: bold;}

.crew-filters {
    color:#282a2d;
    background:white;
    display: flex;
    column-gap: 10px;
    margin: 0 auto;
    align-items: center;
    padding: 15px 0px;
    justify-content: center;
    border-bottom: thin solid black;
 }
 .crew-filters strong {font-size: small;}
 .crew-filters label {font-size:small; margin-bottom: 0 !important;}
 .crew-filters .button {background: #3ba1da; font-weight: bold; font-size:small; margin-top: 0 !important;padding: 3px 10px; border-radius: 0;}
 #crew-search-form .button {background: #3ba1da; font-weight: bold; margin-bottom: 10px;}
   
 #crew-search-form .select2-container--default .select2-selection--multiple {
    background-color: white;
    cursor: text;
    border-radius: 0;
    border: 1px solid #282a2d;
}
 .um-group-header {
            font-weight: bold;
            background: #48c7bf;
            color: #282a2d !important;
            cursor: default;
            pointer-events: none;
        }
 #crew-search-form .select2-container--default .select2-search--inline .select2-search__field {text-transform: uppercase; font-weight:bold; text-align: left; color:#282a2d !important;}
#crew-search-form .select2-container {margin-bottom: 10px;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #90ddd8 !important;color: #282a2d !important; font-weight: bold;}
.crew-select .select2-results__option {color:#282a2d !important;}

/* Make the Select2 box a flex container */
#crew-search-form + .select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    justify-content: space-between; /* left text, right arrow */
    padding-right: 25px; /* space for arrow */
}

/* Placeholder text */
#crew-search-form + #crew-role {
    color: #282a2d;
    flex-grow: 1; /* take remaining space on the left */
}
#crew-search-form  .select2-search__field::placeholder {color:#282a2d;}

#crew-search-form .select2-container--default.select2-container::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #282a2d;
    font-size: 0.9em;
}


#crew-search-form .select2-container--default .select2-selection--multiple .select2-selection__choice {background:#90ddd8 !important; color: #282a2d; border-radius:0; border:none; font-weight: bold;}
#crew-search-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {color:#282a2d !important;}

.crew-results-header {text-align:center;}
.crew-results-header h3 {font-weight:bold; text-transform: uppercase;}

 .um-profile-cards {color:#282a2d; font-size:smaller; }
 .um-profile-card {border-bottom:1px solid #282a2d; padding:15px;display:flex; gap:20px; margin-bottom:30px; align-items:flex-start;}
 .toggle-filters { color:#0073aa; cursor:pointer; }
.profile-photo {flex:0 0 40%; margin-right:20px;}
.profile-details {display:flex; flex-direction: column; row-gap: 0;}
.profile-details p {margin:0; font-size: smaller;}
.profile-details h4 {font-weight: bold;}

.profile-details ul {list-style-type:none; margin-left:0;}
.profile-details .crew-roles li {font-weight:bold;}
.profile-details .bio p {margin-bottom:1.2rem;}

.crew-role-container > .wp-block-group__inner-container {display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }
.crew-role-container h3 {font-weight: bold;}
.crew-role-container ul {list-style-type: none; margin-left:0; font-size:smaller; }
.crew-role-container a {color:#282a2d;}

/* Container styling */
.crew-results-header {
       background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    border: thin solid #000;
}

.results-title {
    margin: 0 0 15px 0 !important;
    font-size: 1.2rem !important;
    color: #000;
}

/* Tag/Badge styling */
.selected-roles-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.role-tag {
    display: flex;
    align-items: center;
   background: #42bfb7;
    padding: 5px 15px;
    font-size: 0.9rem;
    color: #000000;
    font-weight: bold;
}

.remove-role {
    margin-left: 8px;
    text-decoration: none !important;
    color: #000;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    padding: 0 4px;
    transition: color 0.2s;
}

.remove-role:hover {opacity:.5;}

.clear-all-link {
    font-size: 0.8rem;
    color: #888;
    text-decoration: underline;
    margin-left: 10px;
}

.clear-all-link:hover {
    color: #333;
}

/* Profile Mobile Styling */
@media only screen and (max-width: 768px) {
.um-profile-card {display: block;}
.crew-role-container > .wp-block-group__inner-container {    grid-template-columns: 1fr 1fr;}
}
@media only screen and (max-width: 480px) {.crew-role-container > .wp-block-group__inner-container {    grid-template-columns: 1fr;}
}