/*
Theme Name: La Crosse Symphony Orchestra
Version: 1.0
Description: Custom theme
Author: DigiSage, Inc.
Author URI: https://digisage.com
template: bb-theme
*/

:root {
   --lso-pagewidth: 1200px;
   --lso-dark-purple: #130A3D; /* primary dark color, headings, body text */
   --lso-maroon: #992B00;
   --lso-turquoise: #4EC7C1;
   --lso-blue: #18639C;
   /* SVGs */
   /* small caret symbol right (default #fff) */
   --svg-caret-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z' fill='%23ffffff' stroke='none'/></svg>");
}

/* global */

/* full-row padding to equalize content width */
.pad-left-pagewidth > .fl-col-content {
   padding-left: calc((100vw - var(--lso-pagewidth)) / 2);
}
.pad-right-pagewidth > .fl-col-content {
   padding-right: calc((100vw - var(--lso-pagewidth)) / 2);
}
@media(max-width:1140px) {
   .pad-left-pagewidth > .fl-col-content {
      padding-left: 0px;
   }
   .pad-right-pagewidth > .fl-col-content {
      padding-right: 0px;
   }
}

/* layering */
.z-index-5 {
   position: relative;
   z-index: 5;
}
.z-index-10 {
   position: relative;
   z-index: 10;
}
.z-index-20 {
   position: relative;
   z-index: 20;
}

/* remove large outline on focus from BB */
a:focus, button:focus {
   outline: none !important;
}

/* swap the native arrow with the designs sharp pointed arrow */
.fl-button,
.fl-button * {
   transition: all .3s !important;
}
.fl-button i.fa-caret-right::before {
   display: none;
}
.fl-button i.fa-caret-right {
   width: 0;
   height: 0;
   border-left: 7px solid #fff;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
}
/* turquoise button */
.button-turquoise .fl-button i.fa-caret-right {
   border-left-color: var(--lso-turquoise);
}
/* blue button */
.button-blue .fl-button i.fa-caret-right {
   border-left-color: var(--lso-blue);
}
/* red button */
.button-red .fl-button i.fa-caret-right {
   border-left-color: var(--lso-red);
}
.button-red .fl-button:hover i.fa-caret-right,
.button-white .fl-button:hover i.fa-caret-right,
.button-turquoise .fl-button:hover i.fa-caret-right,
.button-blue .fl-button:hover i.fa-caret-right {
   border-left-color: #fff;
}

/* larger arrow (e.g. top bar search, etc.) */
.arrow-large .fl-button i.fa-caret-right {
   border-left: 10px solid #fff;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
}

/* used mainly for homepage H1 */
.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

/* masthead */

/* add decorative waves */
.header-top-bar {
   position: relative;
}
.header-top-bar > .fl-row-content-wrap > .fl-row-content::before {
   content: '';
   display: block;
   opacity: 0.4;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: calc(100% - 700px);
   height: 45px;
   background: url(assets/images/waves-orange-1.svg) repeat-x right bottom;
}
.header-top-bar > .fl-row-content-wrap > .fl-row-content::after {
   content: '';
   display: block;
   opacity: 0.4;
   position: absolute;
   z-index: 1;
   bottom: -20px;
   left: 0;
   width: calc(100% - 880px);
   height: 75px;
   background: url(assets/images/waves-blue-1.svg) repeat-x right bottom;
}

/* adjust menu padding to preserve full menu */
@media(max-width:1400px) {
   #menu-main-menu > li > .pp-has-submenu-container > a,
   #menu-main-menu > li > a {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 18px;
   }
}
#menu-main-menu > li > ul.sub-menu {
   padding-top: 10px;
   padding-bottom: 10px;
}

.fl-search-form form {
   justify-content: flex-end !important;
}
.fl-search-form button {
   width: 50px;
   height: 50px;
   border: none !important;
}
.fl-search-form button:focus {
   outline: none !important;
}
.fl-search-form button i.fl-button-icon {
   width: 100%;
   height: 100%;
   background: url(assets/images/icon-search.svg) no-repeat center;
   background-size: contain;
}
.fl-search-form button i.fl-button-icon::before {
   display: none;
}

/* shrink a few more elements on scroll */
header .topbar-tickets a {
   transition: .3s;
}
header.fl-theme-builder-header-shrink .topbar-tickets a {
   font-size: 18px !important;
   padding-top: 12px !important;
   padding-bottom: 12px !important;
}
header.fl-theme-builder-header-shrink .fl-search-form button {
   width: 40px;
   height: 40px;
}

/* responsive flyout */
.pp-advanced-menu-mobile-toggle {
   border: none !important;
   padding: 10px !important;
}

/* contact form */
.gform-footer button[type="submit"] {
   color: var(--lso-dark-purple) !important;
}
.gform-footer button[type="submit"]:hover {
   color: #fff !important;
   background: var(--lso-dark-purple) !important;
}

/* interior page title */
.page-title {
   position: relative;
}
.page-title .fl-row-content-wrap::before {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   bottom: -20px;
   left: 0;
   width: calc((100vw - 1200px) / 2);
   height: 100%;
   background: url(assets/images/waves-blue-1.svg) no-repeat right bottom;
   background-size: auto 120px;
}

/* homepage */
.home-hero {
   position: relative;
}
/* "LSO" SVG text in bottom right corner */
.home-hero::before {
   content: '';
   display: block;
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 5;
   width: 415px;
   height: 260px;
   background: url(assets/images/text-lso.svg) no-repeat right bottom;
   background-size: contain;
}
.home-hero > .fl-row-content-wrap {
   position: relative;
   overflow: hidden;
}
/* purple background behind hero text */
.home-hero > .fl-row-content-wrap::before {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   background: url(assets/images/home-hero-art.png) no-repeat right 200px top 0;
   background-size: auto 100%;
}
.home-hero .hero-intro {
   position: relative;
   z-index: 5;
}
.home-hero h1 .pp-primary-title {
   text-shadow: 0 0 5px #000;
}
/* big waves across hero bottom */
.home-hero > .fl-row-content-wrap::after {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   bottom: 20px;
   left: 0;
   width: 65%;
   height: 115px;
   background: url(assets/images/waves-blue-1.svg) no-repeat right bottom;
   background-size: auto 100%;
}
@media(max-width:1200px) {
   .home-hero > .fl-row-content-wrap::before {
      background-position: right 60px top 0;
   }
}
@media(max-width:768px) {
   .home-hero::before {
      width: 200px;
      height: 160px;
   }
   .home-hero > .fl-row-content-wrap::before {
      background-position: right 0px top 0;
   }
}

/* gravity form buttons consistent */
.gform-footer button[type="submit"] {
   background: none;
   color: var(--lso-blue);
}
.gform-footer button[type="submit"]:hover {
   background: var(--lso-blue);
   color: #fff;
}

/* events carousel */
.events-carousel-wrap .bx-wrapper {
   position: relative;
}
.events-carousel-wrap .bx-viewport {
   padding-top: 10px;
   padding-bottom: 10px;
}
.events-carousel .event {
   position: relative;
   aspect-ratio: 4 / 3;
   border: 1px solid var(--lso-dark-purple);
   background-size: cover;
   background-position: center;
   transition: .3s;
}
.events-carousel .event .event-date {
   display: flex;
   gap: 10px;
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% - 45px);
   padding: 7px 20px;
   font-size: 22px;
   color: #fff;
   background: var(--lso-dark-purple);
   border-radius: 0 0 22px 0;
   transition: .3s;
}
.events-carousel .event .event-date .date {
   font-weight: 600;
   text-transform: uppercase;
}
.events-carousel .event:hover {
   box-shadow: 0 0 6px rgba(0,0,0,0.7);
   transform: translateY(-2px);
}
.events-carousel .event:hover .event-date {
   background: var(--lso-maroon);
}
/* controls */
.events-carousel-wrap .bx-controls button {
   position: absolute;
   width: 40px;
   height: 40px;
   top: 46%;
   text-indent: -9999px;
   overflow: hidden;
   background: none;
   border: none;
   border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
   transition: .3s;
}
.events-carousel-wrap .bx-controls button:hover {
   opacity: 0.5;
}
.events-carousel-wrap .bx-controls button:focus {
   outline: none;
}
.events-carousel-wrap .bx-controls button.bx-prev {
   left: -50px;
   background: url(assets/images/icon-arrow-left.svg) no-repeat center;
}
.events-carousel-wrap .bx-controls button.bx-next {
   right: -50px;
   background: url(assets/images/icon-arrow-right.svg) no-repeat center;
}
@media(max-width:1200px) {
   .events-carousel .event .event-date {
      font-size: 17px;
      width: calc(100% - 25px);
   }
}

/* program book row */
.season-tickets .program-book-cta {
   position: relative;
   z-index: 5;
}
.season-tickets .right-col > .fl-col-content {
   background-position: bottom 20px left 0px,
                        center !important;
}

/* logo carousel */
.logo-carousel {
   border-right: 1px solid #ccc;
   border-left: 1px solid #ccc;
}
.logo-carousel .pp-logo *:not(img) {
   height: 100px;
}
.logo-carousel .logo-image-wrapper img {
   object-fit: contain;
   width: 100%;
   height: 100%;
}
.logo-carousel button.logo-slider-nav {
   width: 40px !important;
   height: 40px !important;
   top: 46% !important;
   border: none !important;
   outline: none !important;
   border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
   transition: .3s;
}
.logo-carousel button.logo-slider-nav:hover {
   opacity: 0.5;
}
.logo-carousel button.logo-slider-nav span {
   display: none;
}
.logo-carousel .logo-slider-prev {
   left: -70px;
   background: url(assets/images/icon-arrow-left.svg) no-repeat center;
}
.logo-carousel .logo-slider-next {
   right: -70px;
   background: url(assets/images/icon-arrow-right.svg) no-repeat center;
}

/* homepage support row */
.support .ways-to-give {
   position: relative;
   height: 71px;
}
.support .ways-to-give a.fl-button {
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% + 80px);
}
.support .view-sponsors {
   position: relative;
   height: 71px;
}
.support .view-sponsors a.fl-button {
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% + 130px);
}
@media(max-width:768px) {
   .support .ways-to-give a.fl-button,
   .support .view-sponsors a.fl-button {
      width: 100%;
      position: static;
   }
}

/* homepage legacy in every note */
.legacy-text-row .fl-row-content-wrap {
   background-position: center top,
                        center top 120px !important;
}

/* homepage PBS row */
.pbs-row .featured-video iframe {
   width: 100%;
   height: 100%;
   aspect-ratio: 16 / 10;
}


/* concerts page */
#concert-events-list .event-date-photo {
   position: relative;
}
#concert-events-list .event-date-photo .event-date-bar {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
}
#concert-events-list .event-date-photo .event-date-bar span.date {
   font-weight: 600;
}
#concert-events-list .concerts-grid-item .event-date-bar .fl-module-box {
   transition: .3s;
}
#concert-events-list .concerts-grid-item .event-date-photo:hover .event-date-bar .fl-module-box {
   background: var(--lso-maroon);
}


/* footer */
.footer-row-2 .fl-row-content-wrap {
   background-size: 2560px 642px !important;
   background-position: center top;
}
.footer-row-1 .footer-social-wrap {
   transform: translateY(50px);
}
@media(min-width:2000px) {
   .footer-row-1 .fl-row-content-wrap {
      padding-bottom: 80px;
   }
   .footer-row-2 .fl-row-content-wrap {
      min-height: 300px !important;
      background-size: 2560px 400px !important;
      margin-bottom: -200px;
   }
}