/*
Theme Name: LBL Theme Child for IPO
Theme URI: https://lbl.gov
Template: lbl-theme
Author: Lawrence Berkeley National Laboratory
Author URI: https://lbl.gov/
Description: A WordPress theme using custom native web components and Block editors.
Version: 1.0.0
Requires PHP: 7.4
*/

/* Adding BLDS Styling to WPFacet related elements */

.facetwp-expand,
.facetwp-pager
{
   font-family: var(--lbl-font-family-secondary);
}

.entry-content .facetwp-checkbox .facetwp-expand {
    float: none;
}

span.facetwp-expand {
    color: #E04E38;
}

/* This style looks close to styling on current IPO site for search and checkboxes */
.top-div{
    background-color: #DDECEE;
    border: 1px solid #4298B5;
}

.entry-content .facetwp-search{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--search-form-background-color, transparent);
    border: 0;
    border-bottom: .7px solid var(--search-form-border-color, var(--lbl-color-medium-gray));
    border-radius: 0;
    color: var(--search-form-color, var(--lbl-color-dark-gray));
    font-family: var(--lbl-font-family-primary);
    font-size: var(--search-form-font-size, 16px);
    font-weight: var(--search-form-font-weight, 400);
    height: var(--search-form-height, 28px);
    padding: var(--search-form-padding, 4px 0);
    width: 100%;
}

.post-content .entry-content .facetwp-input-wrap {
   width: 100%;
}

.top-div .facetwp-facet {
   margin-bottom: 0px;
   padding-left: 5px;
}

.facetwp-facet input.facetwp-search, .facetwp-facet input.facetwp-location {
   font-size: 1.25em;
   padding-left: 5px;
}



/* CSS to fix image overflow */
lbl-grid-card {
   /* Ensures that the card fills its grid column */
   width: 100%;
   box-sizing: border-box;
   overflow: hidden; /* Prevents content from overflowing outside the card */
}

lbl-grid-card img {
   max-width: 100%; /* Ensures images don't exceed the width of their container */
   height: auto; /* Keeps the image aspect ratio intact */
   display: block; /* Removes any inline gap for images */
}

/****************************************************************/
/* CSS for Available Technologies Search */
/****************************************************************/


/* Spacing between search and category selector */
.available-technologies .facetwp-facet {
   margin-bottom: 1rem;
}

.available-technologies .top-div {
   background-color: white;
   border: 1px solid white;
   font-family: var(--lbl-font-family-primary);
   font-size: 18px;
   font-style: normal;
   font-weight: 500;
   line-height: 150%;
   letter-spacing: 0.3px;
}

.available-technologies .facetwp-checkbox.checked {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Ccircle cx='12.5' cy='12.5001' r='11.2176' fill='white' stroke='%23007681' stroke-width='1.5'/%3E%3Ccircle cx='12.4989' cy='12.5' r='5.27123' fill='%23007681'/%3E%3C/svg%3E");
   background-size: 20px 20px;
}

.available-technologies .facetwp-checkbox {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29' fill='none'%3E%3Ccircle cx='14.4999' cy='14.5001' r='11.2176' fill='white' stroke='%23007681' stroke-width='1.5'/%3E%3C/svg%3E") 0 50% no-repeat;
   background-size: 20px 20px;
   margin-bottom: 4px;
   padding-left: 20px;
   cursor: pointer;
   flex-shrink: 0;
   padding-left: 25px;
}

.available-technologies .facetwp-expand {
   font-family: var(--lbl-font-family-primary);
   color: var(--Teal, #007681);
   font-weight: 500;
}

.available-technologies .facetwp-depth.visible {
   padding-left: 1.75rem;
}

/* When Available Technology's category text is multi-line align the checkbox with the top line of text. */
.facetwp-checkbox.long-text {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29' fill='none'%3E%3Ccircle cx='14.4999' cy='14.5001' r='11.2176' fill='white' stroke='%23007681' stroke-width='1.5'/%3E%3C/svg%3E") 0 10% no-repeat;
   background-size: 20px 20px;
   margin-bottom: 4px;
   padding-left: 20px;
   cursor: pointer;
   flex-shrink: 0;
   padding-left: 25px;
}

/* Available Technologies Pagination */
.facetwp-pager {
   display: flex;
   justify-content: center;
   margin-top: 3rem;
 }

 .facetwp-page {
   display: inline-block;
   padding: var(--lbl-gap-xxxxxs, 4px) var(--lbl-gap-xxxxs, 8px);
   font-family: var(--font-family-primary, sans-serif);
   font-size: clamp(15.5px, calc(0.96875rem + ((1vw - 7.67px) * 0.5176)), 18px);
   font-weight: 500;
   letter-spacing: 0.3px;
   line-height: 1.2;
   color: var(--lbl-color-dark-blue);
   text-align: center;
   vertical-align: middle; /* Important for inline alignment */
 }

 .facetwp-page:hover {
   color: var(--lbl-color-teal);
 }
 
 .facetwp-page.active {
   background-color: var(--lbl-color-cloud); /* light gray */
   color: var(--lbl-color-teal);
   border-radius: 2px;
   vertical-align: middle;
 }

/* Make Featured Technology Link Unclickable */
 .lbl-tags a[href="#"],
 .lbl-tags a[href="javascript:void(0)"] {
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: default;
 }
 
 .facetwp-page:hover::after {
   width: calc(100% - 16px); /* Adjust based on your padding */
 }
 
 .facetwp-page.active::after {
   display: none;
 }
 
 /* Style for prev/next links if needed */
 .facetwp-page.prev,
 .facetwp-page.next {
   color: var(--lbl-color-teal);
 }
 
 /* Style for ellipsis dots */
 .facetwp-page.dots {
   pointer-events: none;
   color: var(--lbl-color-dark-gray);
 }
 
 /* Replace double chevrons with single ones using ::before */
.facetwp-page.prev::before,
.facetwp-page.next::before {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  display: inline-block;
}

/* Remove the original text */
.facetwp-page.prev,
.facetwp-page.next {
  color: var(--lbl-color-teal);
  font-family: var(--font-family-primary, sans-serif);
  text-indent: -9999px; /* Hide original text */
  position: relative;
}

.facetwp-page.prev::before {
  content: '<';
  text-indent: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.facetwp-page.next::before {
  content: '>';
  text-indent: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* Media Queries */
@media only screen and (max-width: 475px) {

   /* Re-align checkbox when text wraps */
   .facetwp-checkbox[data-value="water-air-geosciences-and-environment"],
   .facetwp-checkbox[data-value="building-energy-efficiency-and-analysis"],
   .facetwp-checkbox[data-value="energy-efficiency-for-industrial-processes"],
   .facetwp-checkbox[data-value="human-health-precision-medicine"],
   .facetwp-checkbox[data-value="synth-bio-tools-sw"],
   .facetwp-checkbox[data-value="materials-for-water-air-environment"]
   {
      background-position-y: 10%;
   }
}

@media only screen and (max-width: 425px) {
   
   /* Re-align checkbox when text wraps */
   .facetwp-checkbox[data-value="spectroscopy-and-microscopy"]
   {
      background-position-y: 10%;
   }
}