/** 
 * Theme Name: FOL Twenty Twenty Five 
 * Theme URI: https://wordpress.org/themes/twentytwentyfive/
 * Template: twentytwentyfive
 * Description: Friends of the Library custom theme
 * Author: OCLS
 * Text Domain: fol-theme
 */

@import url("assets/css/fol-color.css");


/*
***********************************************************************************************************
                        Overwritting WordPress and parent theme style values                                   
***********************************************************************************************************
*/
body {
   --max-content-width: 1440px;
   --wp--style--root--padding-left: clamp(20px, calc(20px + (80 * ((100vw - 768px) / (1440 - 768)))), 100px);
   --wp--style--root--padding-right: clamp(20px, calc(20px + (80 * ((100vw - 768px) / (1440 - 768)))), 100px);
}

.wp-site-blocks>*,
.is-layout-flow>*,
.is-layout-constrained>* {
   margin-block-start: unset !important;
}

.wp-block-spacer {
   height: 96px !important;

   @media (max-width: 767px) {
      height: 80px !important;
   }
}

/* Focus styles */
:focus {
   outline: none;
}

:focus-visible {
   outline: 2px solid var(--heading);
}

/*
***********************************************************************************************************
                                             Global Styles                                  
***********************************************************************************************************
*/
h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--heading);
   letter-spacing: 0;
   margin-block-start: 0;
   margin-block-end: 0;
}

p {
   color: var(--paragraph);
   letter-spacing: 0;
   font-weight: 400;
   margin-block-start: 0;
   margin-block-end: 0;
}

a {
   color: var(--button-primary);
   text-decoration: none;
}

button:hover {
   cursor: pointer;
   opacity: 0.7;
}

a:hover,
a:focus {
   opacity: 0.7 !important;
   text-decoration: underline !important;
}

a.wp-block-button__link:hover,
a.wp-block-button__link:focus {
   text-decoration: none !important;
}

.primary-button a {
   background-color: var(--button-primary);
   color: var(--button-primary-text);
   border-radius: 4px;
   padding: 8px 24px;
   font-weight: 600;
}

.secondary-button a {
   background-color: var(--button-secondary);
   color: var(--button-secondary-text);
   border: 1px solid var(--button-secondary-text);
   border-radius: 4px;
   padding: 8px 24px;
   font-weight: 600;
}

.wp-block-post-content>div {
   padding-left: var(--wp--style--root--padding-left);
   padding-right: var(--wp--style--root--padding-left);
}

.wp-block-template-part {
   background-color: var(--header-footer-background);
}

/*
***********************************************************************************************************
                                    Navigation Overlay Styles                                
***********************************************************************************************************
*/
.fol-mobile-menu {
   padding-top: clamp(20px, calc(20px + (8 * ((100vw - 768px) / (1440 - 768)))), 28px) !important;
   padding-bottom: clamp(20px, calc(20px + (8 * ((100vw - 768px) / (1440 - 768)))), 28px) !important;
   padding-left: var(--wp--style--root--padding-left) !important;
   padding-right: var(--wp--style--root--padding-right) !important;
}

.fol-mobile-menu .wp-block-site-logo a:focus {
   opacity: 1 !important;
}

.fol-mobile-nav-menu-links {
   padding-top: 24px;
}

.wp-block-kadence-column:not(.fol-header-container) {
   z-index: 0;
}

.wp-block-navigation__responsive-container-open {
   display: flex;
}

@media (min-width: 600px) {
   .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
   }
}

@media (min-width: 768px) {
   .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none;
   }
}

@media (max-width: 767px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
   }
}

/*
***********************************************************************************************************
                                       Header Styles                                  
***********************************************************************************************************
*/
.fol-header-container {
   max-width: var(--max-content-width);
   margin: auto;
   padding-top: clamp(20px, calc(20px + (8 * ((100vw - 768px) / (1440 - 768)))), 28px);
   padding-bottom: clamp(20px, calc(20px + (8 * ((100vw - 768px) / (1440 - 768)))), 28px);
   padding-left: var(--wp--style--root--padding-left);
   padding-right: var(--wp--style--root--padding-right);
}

.fol-header nav {
   color: var(--button-primary);
   font-weight: 600;
}

.fol-header nav li:not(:last-child) {
   padding: 4px 12px;
}

.fol-header-nav-join a {
   background-color: var(--button-primary) !important;
   border-radius: 4px;
   color: var(--button-primary-text) !important;
   padding: 8px 24px;
}

.fol-header-nav-join a:hover,
.fol-header-nav-join a:focus {
   text-decoration: none !important;
}

.fol-header {
   justify-content: space-between;
}

/*
***********************************************************************************************************
                                       Footer Styles                                 
***********************************************************************************************************
*/

.fol-footer {
   padding-top: 64px;
   padding-bottom: 64px;
   padding-left: var(--wp--style--root--padding-left);
   padding-right: var(--wp--style--root--padding-right);
   max-width: var(--max-content-width);
   margin: auto;
}

.fol-footer h5,
.fol-footer p {
   font-size: 16px;
   margin-block-start: 0;
   margin-block-end: 0;
}

.fol-footer a {
   text-decoration: none;
   color: var(--button-primary);
}

.fol-footer .fol-instagram::before {
   content: url("assets/images/instagram-icon.svg");
   vertical-align: text-top;
   padding-right: 8px;
}

.fol-footer .fol-facebook::before {
   content: url("assets/images/facebook-icon.svg");
   vertical-align: text-top;
   padding-right: 8px;
}

/*
***********************************************************************************************************
                                       Pattern Styles                                  
***********************************************************************************************************
*/

/****************************************** Hero ******************************************/
.hero {
   max-width: var(--max-content-width);
   margin: auto;
   padding-left: var(--wp--style--root--padding-left);
   padding-right: var(--wp--style--root--padding-right);
}

.hero .wp-block-cover {
   height: clamp(250px, calc(250px + (281 * ((100vw - 375px) / (1440 - 375)))), 531px);
   min-height: 200px;
}

/****************************** Featured Image Pull Quote *********************************/
.fol-featured {
   background-color: var(--alternate-section-background);
   padding-top: clamp(32px, calc(32px + (32 * ((100vw - 768px) / (1440 - 768)))), 64px);
   padding-bottom: clamp(32px, calc(32px + (32 * ((100vw - 768px) / (1440 - 768)))), 64px);
}

.fol-featured .wp-block-kadence-column {
   max-width: 610px;
   flex: 1;
}

.fol-featured.non-alt-background {
   background-color: var(--section-background) !important;
}

/******************************** Spotlight & Slick slider ********************************/
.spotlight {
   max-width: var(--max-content-width);
   margin: auto;
}

.slick-slider {
   display: block !important;
}

.slick-track>* {
   width: 340px;
   border: 1px solid var(--card-border);
   border-radius: 8px;
   background-color: var(--card-background);
   padding-left: 0;
   padding-right: 0;
}

.slick-track {
   display: flex !important;
}

.slick-slide {
   display: flex !important;
   flex-direction: column;
   margin: 10px;
   height: inherit !important;
   outline: none !important
}

.slick-slide img {
   aspect-ratio: 16/9;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   object-fit: cover;
}

.slick-slide>* {
   margin: 0 !important;
}

.slick-slide a {
   outline: none !important;
}

.card-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: 20px 16px;
   gap: 12px;
}

.card-content .wp-block-post-excerpt {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.card-content>a {
   margin-left: auto;
   margin-right: auto;
}

#spotlight-arrows {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 150px;
}

#progress-bar,
#spotlight-arrows {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
}

.slick-arrow {
   background-color: unset;
   color: var(--button-primary);
   border: 1px solid var(--button-primary);
   border-radius: 50%;
   width: 45px;
   height: 45px;
   z-index: 2;
}

.slick-disabled {
   border-color: var(--light-text);
   opacity: 1 !important;
   cursor: default !important;
}

.slick-disabled svg path {
   stroke: var(--light-text);
}

.slick-dots {
   line-height: 0;
   position: static;
}

.slick-dots li {
   margin: 0;
   height: 4px;
   width: 5px;
}

.slick-dots li button {
   background-color: var(--alternate-section-background);
   height: 100%;
   padding: 0;
   width: 100%;
}

.slick-dots li button:before {
   content: "";
   height: 100%;
   width: 100%;
}

.slick-dots li:first-child>button {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
}

.slick-dots li:last-child>button {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
}

.slick-dots .slick-active,
.slick-dots .slick-active button,
.slick-dots .slick-active button:before {
   width: 55px !important;
}

.slick-dots .slick-active button:before {
   width: 40px;
   border-radius: 2px;
   background-color: var(--button-primary);
}

@media (min-width: 631px) {

   .slick-dots li {
      width: 12px;
   }
}

@media (min-width: 1178px) {

   .slick-dots li {
      width: 17px;
   }
}

@media (min-width: 1610px) {
   .slick-dots li {
      width: 27px;
   }
}

@supports (width: calc(80px / (sibling-count() - 1))) {
   .slick-dots li {
      width: calc(45px / (sibling-count() - 1)) !important;
   }
}

@media(max-width: 768px) {
   .slick-track>* {
      width: 300px;
   }
}

/*********************************** Stat Strip Styles ************************************/
.stat-strip .kt-row-column-wrap {
   justify-content: center;
   column-gap: 16px !important;
   grid-template-columns: repeat(3, 196px) !important;
}

.stat-strip .wp-block-kadence-column {
   border-right: 1px solid rgba(204, 204, 204, 0.5);
   text-align: center;
   padding-right: 16px;
}

.stat-strip .wp-block-kadence-column:last-child {
   border-right: none;
   padding-right: 0;
}

@media(max-width: 768px) {
   .stat-strip .kt-row-column-wrap {
      grid-template-columns: repeat(1, 176px) !important;
      row-gap: 32px;
   }

   .stat-strip .wp-block-kadence-column {
      border-right: none;
      padding-right: 0;
   }
}

/******************************** Volunteer Cards Styles **********************************/
.volunteer-cards {
   max-width: 1220px;
}

.volunteer-cards>div>div {
   max-width: 610px;
}

.volunteer-cards p {
   padding-top: 10px;
}

.volunteer-cards .apply-link::after {
   content: url("assets/images/external-icon.svg");
   vertical-align: text-top;
   padding-left: 8px;
}

/********************************* Donate Guide Styles ************************************/
.donate-guide .list-check-icon {
   list-style-type: "\2713";
   padding-inline-start: 20px;
}

.donate-guide .list-check-icon li {
   padding-inline-start: 8px;
}

.donate-guide .list-check-icon li::marker {
   color: var(--button-primary);
   font-weight: 400;
   font-size: 20px;
}

.donate-guide .list-x-icon {
   list-style-type: "\2717";
   padding-inline-start: 20px;
}

.donate-guide .list-x-icon li {
   padding-inline-start: 8px;
}

.donate-guide .list-x-icon li::marker {
   color: var(--red);
   font-weight: 400;
   font-size: 20px;
}

/*********************************** Membership Styles ************************************/
.memberships>div {
   align-items: unset !important;
   max-width: 1235px;
}

.membership>div {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.membership>div ul {
   flex-grow: 1;
   margin-block-start: 0;
}

/************************************** FAQ Styles ****************************************/
.faq-accordion .wp-block-kadence-pane {
   border-bottom: solid 1px var(--card-border);
}

/*
***********************************************************************************************************
                                          Other Styles                                  
***********************************************************************************************************
*/

/** Renew Membership link **/
.membership-renew-link::before {
   content: url("assets/images/arrow-path-icon.svg");
   vertical-align: text-top;
   padding-right: 8px;
}

/** gravity form styles */
.gform_wrapper input,
.gform_wrapper textarea {
   border-radius: 4px;
   border: solid 1px var(--card-border);
   background-color: var(--card-background);
}

.gfield_label {
   font-weight: 600 !important;
}

.gform_wrapper input {
   height: 36px;
}

#gform_wrapper_12 .gform-page-footer {
   display: flex;
   justify-content: space-between;
}

#gform_fields_12_4 input {
   height: 13px;
   vertical-align: top;
}

#gform_fields_12_4 label {
   display: inline-block;
   max-width: calc(100% - 32px);
}

#gform_fields_12_4 fieldset {
   padding-bottom: 15px;
}

.gform_previous_button {
   background-color: var(--button-secondary) !important;
   color: var(--button-secondary-text) !important;
   border: solid 1px var(--button-secondary-text) !important;
   border-radius: 4px;
   padding: 8px 24px;
   font-weight: 600;
   font-family: Inter, 'sans-serif';
   font-size: 16px;
}

.gform_next_button,
.gform_wrapper button[type="submit"] {
   background-color: var(--button-primary) !important;
   color: var(--button-primary-text) !important;
   border: solid 1px var(--button-primary) !important;
   border-radius: 4px;
   padding: 8px 24px;
   font-weight: 600;
   font-family: Inter, 'sans-serif';
   font-size: 16px;
}

form.fol-loader {
   position: relative;
}

form.fol-loader[data-active-form="true"] .gform_fields,
form.fol-loader[data-active-form="true"] .gform_page_fields {
   opacity: 0.25;
}

#gform_fields_10 input {
   height: 40px;
   font-family: inter, san-serif;
}

#gform_fields_10 #field_submit input {
   height: 32px;
   padding: unset;
   width: 80px;
}

#gform_fields_10.gform_fields {
   grid-column-gap: 12px;
   align-items: center;
}

#gform_10 .gform-footer {
   display: none !important;
}

@media(max-width: 640px) {
   #gform_wrapper_10.gravity-theme .gfield:not(.gfield--width-full) {
      grid-column: span 8;
   }

   #gform_wrapper_10.gravity-theme .gfield.gfield--width-third {
      grid-column: span 4;
   }
}

/** Baord Meetings list */
.fol-board-meetings p {
   padding-top: 12px;
   padding-bottom: 12px;
}

/** 404 list links */
.page-not-found-links li a {
   color: var(--button-primary);
}

/** feature cards */
.feature-cards>div>div {
   min-height: 255px;
   max-width: 400px;
}

.feature-cards>div>div>div {
   flex-direction: column;
   flex-grow: 1;
}

.feature-cards h4 {
   flex-grow: 1;
}

@media(max-width: 767px) {
   .feature-cards>div>div {
      min-height: 150px;
   }
}

/** Booksale */
.fol-bookstore-booksale {
   max-width: 1030px;
   margin: auto;
}

.fol-bookstore-booksale>div {
   display: flex;
   flex-direction: row;
   column-gap: 20px;
   padding: 24px 0;
}

.fol-bookstore-booksale>div>div {
   flex-direction: column;
}

.fol-bookstore-booksale .event-image {
   flex-basis: 35%;

}

.fol-bookstore-booksale .event-content {
   flex: 65%;
}

.fol-bookstore-booksale img {
   width: 100%;
   max-height: 250px;
   object-fit: cover !important;
}

.fol-bookstore-booksale .event-excerpt {
   padding: 20px 0 30px;
}

@media(max-width: 767px) {
   .fol-bookstore-booksale>div {
      flex-direction: column;
   }
}

.fol-bookstore-booksale {
   max-width: 610px;
}

.fol-bookstore-booksale h4 {
   font-size: 18px;
   padding-top: 20px;
   padding-bottom: 5px;
}

.fol-bookstore-booksale a {
      color: var(--heading);
}

/* Hide on mobile */
@media (max-width: 768px) {
   .hide-on-mobile {
      display: none;
   }
}