/*
Theme Name: ISCBC
Theme URI: https://github.com/Denman-Digital/iscbc-theme
Author: Denman Digital
Author URI: https://denman.digital
GitHub Theme URI: https://github.com/Denman-Digital/iscbc-theme
Description: Modern responsive WordPress Theme for ISCBC (bcinvasives.ca). Design & Development by Denman Digital.
Version: 1.0.0
Tested up to: 5.6
Requires PHP: 7.3
License: GNU General Public License v2 or later
License URI: license
Text Domain: iscbc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

iscbc is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*
This file is just used to identify the theme in WordPress.
The compiled CSS output can be found in /assets/css/theme.css
The SASS sources for it can be found in /src/scss/
*/

header#masthead {
    position: relative;
    padding: 0 !important;
}

.page .entry-header .entry-title {
    padding: 0 0 100px !important;
    text-align: left !important;
}
.page .slider-slides .entry-header .entry-title {
    padding-bottom: 0 !important;
}
.page .slider-slide .aspect-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* This ensures the image covers the area */
    object-position: center; /* This keeps the image centered */
}
/*.home .entry-header {
    display: none !important;
}*/

#primary article .home-content-container {
    margin-top: 48px;
}

.entry-header .hero-breadcrumb .hero-breadcrumb-separator {
    color: #000;
}

.single-invasive_species #masthead {

}

.banner-search-bar .wp-element-button {
    min-height: 0;
    line-height: 1;
}

.featured-species-grid article {
    overflow: hidden;
    padding: 0 !important;
}

.featured-species-grid .aspect-wrapper.aspect-3x2, .aspect-wrapper.aspect-two-thirds {
    padding-top: 100%;
}

/*.featured-species-grid .aspect-wrapper.aspect-3x2, .aspect-wrapper.aspect-two-thirds img {
    width: 150%;
}*/

header#masthead ul#primary-menu ul.sub-menu li.menu-item:nth-last-child(-n + 2) {
    display: flex !important;
}

.has-dark-green-background-color {
    background-color: #284C35;
}
.has-light-green-background {
    background-color: #EAEFEC;
}
.pdf-download-link {
    background-color: #E96611;
    color: #FFFFFF;
    border: solid 1px #E96611;
    transition: 300ms background-color;
    padding: 8px 16px;
}
.pdf-download-link:hover {
    background-color: #FFFFFF;
    color: #E96611;
}

/* Identify page */
.identify-invasives-category {
    background: #e3e8f0;
    column-gap: 10px;
}
.identify-invasives-category button {
    width: 40%;
    max-width: 320px;
    background: none;
    color: #000;
    text-transform: uppercase;
    text-align: left;
    padding: 1vh 30px !important;
}
#identify .identify-invasives-search {
    justify-content: flex-start;
}

#identify .card.pb-12vh {
    border: 0 !important;
    box-shadow: none;
}
#invasives-index .invasive_species .invasive-header {
    margin-bottom: 0.5em;
}
#invasives-index .invasive-thumbnail-wrapper img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
}
#invasives-index .invasive_species .invasive-warning {
    font-weight: 600;
}
#invasives-index .invasive_species .invasive-warning span {
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 0.5em;
}
#invasives-index .invasive_species .invasive-body {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    max-width: 60%;
}
#invasives-index .invasive_species .invasive-read-more {
    font-weight: bold;
}
#invasives-index .invasive_species .invasive-read-more svg {
    color: #E96611 !important;
}
#identify .identify-invasives-search {
    margin-bottom: 30px;
}
#identify .identify-invasives-search #invasives-search {
    border: 0;
    background: #FFF;
    padding: 0 0 0 10px;
}
#identify .identify-invasives-search #invasives-search button {
    background: #E96611;
    color: #FFFFFF;
    padding: 0 20px;
    height: 34px;
    font-weight: bold;
}
#identify .identify-title {
    text-align: center;
    margin-bottom: 30px;
}
#identify .filters-row {
    display: flex;
    column-gap: 0.5%;
}
#identify .filters-row .identify-invasives-filter {
    width: 33%;
}

/* Individual Invasive Species */
.single-invasive_species #masthead {
    position: relative;
    padding-top: 0 !important;
}
.single-invasive_species #primary header.invasive-header {
    margin-top: 60px !important;
}
.single-invasive_species #primary header.invasive-header .col {
    text-align: left;
}
.quick-notes-box {
    border: solid 32px #284C35;
    display: flex;
    padding: 32px 80px;
    column-gap: 32px;
    margin: 32px 0 64px;
}
.quick-notes-box .quick-notes-image {
    width: 30%;
}
.quick-notes-box .quick-notes-description {
    width: 70%;
}
.quick-notes-box .quick-notes-description p:last-child {
    margin-bottom: 0;
}
.other-featured-species-block .entry-header .entry-title {
    padding: 0 !important;
}

/* Games & Activities page */
#activity-sheets .youth-activity {
    padding: 0 10px 0 0;
    margin-top: 20px !important;
}
#activity-sheets .youth-activity > .col__inner {
    padding: 0 !important;
    height: 270px;
}
#activity-sheets .youth-activity > .col__inner > .col__content {
    display: flex;
}
#activity-sheets .youth-activity > .col__inner > .col__content figure.activity-thumb {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    justify-content: center;
    max-width: 175px;
}
#activity-sheets .youth-activity > .col__inner > .col__content .wp-block-group {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    flex-grow: 1;
    max-width: calc(100% - 175px);
}
#activity-sheets .youth-activity > .col__inner > .col__content .wp-block-group .wp-block-group__inner-container {
    margin-left: 0 !important;
}
#activity-sheets .youth-activity > .col__inner > .col__content .wp-block-group .has-sm-font-size {
    margin-bottom: 0;
}
#activity-sheets .youth-activity > .col__inner > .col__content .wp-block-group .has-lg-font-size {
    margin-bottom: 50px;
}
#activity-sheets .youth-activity > .col__inner > .col__content figure.activity-thumb img {
    position: relative;
}

/* News and Events page */
#blog-index .post-thumbnail {
    display: inline;
}

#blog-index img.size-news-featured {
    width: 100%;
    line-height:1;
}

#blog-index .card-content {
    padding: 15px 20px 20px;
}

#blog-index .card-content .read-more {
    font-weight: bold;
}
#blog-index .card-content .read-more svg {
    color: #f47929;
}

.news-grid .page-numbers {
    margin-left: 0;
    text-align: center;
    margin-top: 40px;
    padding-inline-start: 0;
}
.news-grid .page-numbers li {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    text-align: center;
}
.news-grid .page-numbers li .page-numbers {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.news-grid .page-numbers li .page-numbers.current {
    background-color: #000;
    color: #FFFFFF;
}
.news-grid .page-numbers li a.next {
    width: auto;
}
.news-grid .page-numbers li a.page-numbers {
    color: #000000;
}

#news-filters-form .news-category-filter {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 35px;
}
#news-filters-form .news-category-filter label {
    display: block;
}
#news-filters-form .news-category-filter select,
#news-filters-form .news-category-filter input {
    height: 34px;
}
#news-filters-form button {
    background: #0B2D64;
    color: #FFF;
    border: solid 2px #0B2D64;
    text-transform: uppercase;
    font-size: 16px;
    height: 34px;
}
.iscbc-hero h1 {
    text-align: right;
}
.home-content-container .iscbc-hero--content {
    width: auto;
}
.home-content-container .iscbc-hero--content h1 {
    text-align: left;
}
@media (min-width: 992px) {
    .iscbc-hero--content {
        bottom: 120px;
        max-width: 900px;
        width: 80%;
    }
    .iscbc-hero h1 {
        max-width: none;
        font-size: 80px;
    }
}
.hero-species-link a {
    background: #e96611;
    color: #FFFFFF;
    padding: 5px 10px;
    display: inline-block;
    margin-top: 10px;
    transition: 300ms background;
}
.hero-species-link a:hover {
    background-color: #3A694B;
}
.news-grid .page-numbers li .page-numbers.prev,
.news-grid .page-numbers li .page-numbers.next {
    width: auto;
}


/*** New Dynamic Styles ***/
.min-60vh {
  min-height: 67vw;
}
@media screen and (min-width: 783px) {
    .tab-slider-container.dynamic-style {
      position: relative;
    }
    .min-60vh {
        min-height: 60vh;
    }
  }
  @media (min-width: 992px) {
    .tab-slider-container.dynamic-style .col-lg-8 {
      width: 80%;
    }
  }
  @media screen and (min-width: 783px) {
    .tab-slider-container.dynamic-style {
      height: 67vw;
    }
    .tab-slider-container.dynamic-style::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6); /* Adjust this for the overlay color and opacity */
      z-index: 1; /* Ensures the overlay sits on top of the background */
    }
    .tab-slider-container.dynamic-style .wp-block-gutestrap-col > .justify-content-center {
      align-items: baseline !important;
      -webkit-box-align: center !important;
      -ms-flex-align: center !important;
      padding-top: 4vh;
    }
    .tab-slider-container.dynamic-style > .container {
      z-index: 2;
      position: relative;
    }
    .tab-slider-container.dynamic-style ul.slider-labels {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
      padding-inline-start: 0;
      margin-bottom: 0;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 100%;
      border-bottom: #FFFFFF solid 2px;
    }
    .tab-slider-container.dynamic-style ul.slider-labels li {
      margin-bottom: 0;
    }
    .tab-slider-container.dynamic-style ul.slider-labels li button {
      background: transparent;
      border: 0;
      color: #FFFFFF;
      text-align: left;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 18px;
    }
    .tab-slider-container.dynamic-style ul.slider-labels li.is-selected button {
        border-bottom: #FFFFFF solid 2px;
    }
    .tab-slider-container.dynamic-style .slider-slide .card.has-off-white-background-color {
      background: transparent !important;
      box-shadow: none;
    }
    .tab-slider-container.dynamic-style .slider-slide .card.has-off-white-background-color .card-images {
      display: none;
    }
    .tab-slider-container.dynamic-style .slider-slide .card.has-off-white-background-color .card-content {
      color: #FFFFFF;
    }
    .tab-slider-container.dynamic-style .slider-controls,
    .tab-slider-container.dynamic-style .slider-dots {
      display: none;
    }
    .tab-slider-container.dynamic-style .card-content .card-title {
      display: none;
    }
    .tab-slider-container.dynamic-style .card-content {
      font-size: 24px;
    }
  }
  @media screen and (max-width: 782px) {
    .tab-slider-container.dynamic-style {
      background: transparent !important;
    }
    .tab-slider-container.dynamic-style > .container > div.row {
      min-height: 0px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .tab-slider-container.dynamic-style .slider-labels {
      display: none;
    }
    .tab-slider-container.dynamic-style .card {
      flex-direction: column;
    }
    .tab-slider-container.dynamic-style .card-images {
      position: relative;
      /*width: 50%; 
      height: 100%; */
      overflow: hidden; 
      flex-shrink: 0; 
    }
    
    .tab-slider-container.dynamic-style .card-images picture {
      /*height: 100%;*/
    }
    
    .tab-slider-container.dynamic-style .card-images img {
      max-width: 100%;
      height: auto; 
      /*object-fit: cover;*/
      object-fit: contain;
      object-position: center center; 
    }
    .tab-slider-container.dynamic-style .card-content {
      display: flex;
      flex-direction: column; 
      justify-content: center; 
      align-items: flex-start;
      color: #000000;
    }
  
  }
  
  .dynamic-multistep-info-block,
  .dynamic-overlay {
    position: relative;
  }
  .dynamic-multistep-info-block .wp-block-gutestrap-col.col-lg {
    min-width: 30%;
    position: relative;
  }
  .dynamic-multistep-info-block::before,
  .dynamic-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Adjust this for the overlay color and opacity */
    z-index: 0; /* Ensures the overlay sits on top of the background */
  }
  .dynamic-multistep-info-block h2.wp-block-heading {
    text-shadow: 3px 3px 5px #000000;
  }
  .dynamic-multistep-info-block .property-item {
    margin-bottom: 40px;
  }
  .dynamic-multistep-info-block .property-item h5 {
    opacity: 0.45;
    z-index: 1;
  }
  .dynamic-multistep-info-block .property-item .description {
    margin-top: -60px;
    margin-left: 50px;
    text-shadow: 3px 3px 5px #000000;
    z-index: 5;
  }
  @media screen and (max-width: 782px) {
    .dynamic-multistep-info-block .property-item p.description {
      margin-top: -95px;
      margin-left: 60px;
    }
    .dynamic-multistep-info-block .property-item p.description br {
      display: none;
    }
  }
  
  
  
  .posts-slider.has-dynamic-style {
    max-width: 800px;
    margin: 100px auto;
  }
  .posts-slider.has-dynamic-style .slider-slide {
    box-shadow: 0 5px 15px #00000033;
  }
  .posts-slider.has-dynamic-style .card {
    display: flex; 
    justify-content: flex-start; 
    align-items: stretch; 
  }
  .posts-slider.has-dynamic-style .card {
    flex-direction: column;
  }
  
  @media screen and (max-width: 782px) {
    .posts-slider.has-dynamic-style .card,
    .posts-slider.has-dynamic-style .card-content {
      background-color: #FFFFFF !important;
    }
  }
  .posts-slider.has-dynamic-style .card-images {
    position: relative;
    overflow: hidden; 
    flex-shrink: 0; 
  }
  
  .posts-slider.has-dynamic-style .card-images picture {
    height: 100%;
  }
  
  .posts-slider.has-dynamic-style .card-images img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
    object-position: center center;
    max-height: 67vw;
  }
  .posts-slider.has-dynamic-style .card-content {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    color: #000000;
  }
  @media screen and (min-width: 783px) {
    .posts-slider.has-dynamic-style .card {
      max-height: 480px;
      flex-direction: row;
      height: 100%; 
      width: 100%;
      max-height: 480px;
    }
    .posts-slider.has-dynamic-style .flip-card-content {
      flex-direction: row-reverse;
    }
    .posts-slider.has-dynamic-style .card-images {
      position: relative;
      width: 50%; 
      height: 100%; 
    }
    .posts-slider.has-dynamic-style .card-images {
      height: 100%;
      width: 50%;
    }
    .posts-slider.has-dynamic-style .card-images img {
      width: 100%;
      height: 100%; 
      object-fit: cover;
    }
  }
  
  .min-80vh {
    min-height: 80vh;
  }
  
  .flip-card-content {
    flex-direction: row-reverse;
  }
  .off-grid-block.has-dynamic-style .box {
    min-width: 70vw;
    margin: 45px 0;
  }
  .off-grid-block.has-dynamic-style .box-title {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .off-grid-block.has-dynamic-style .box p {
    margin-bottom: 0.5rem;
  }
  .off-grid-block.dynamic-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Adjust this for the overlay color and opacity */
    z-index: 0; /* Ensures the overlay sits on top of the background */
  }
  .off-grid-block.dynamic-overlay .col__content {
    position: relative;
  }
  .has-dynamic-style .container-fluid {
    padding: 0 !important;
  }
  .has-dynamic-style .off-grid-block .align-items-md-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  @media screen and (min-width: 992px) {
    .off-grid-block.has-dynamic-style .box {
      padding: 20px;
      min-width: 30vw;
    }
  }
  
  
  @media screen and (max-width: 782px) {
    .wp-block-media-text {
      display: block;
    }
    .wp-block-media-text__media img {
      width: auto;
      max-width: 100%;
    }
    .wp-block-media-text.has-dynamic-style {
      display: flex;
      justify-content: center;
    }
  }

  .app-download-button {
    margin: 0;
  }