/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   FULL-WIDTH BREAKOUT - Parent Container Fix
   Allows .full-width-breakout class to work in Bricks sections
   ========================================================================== */

/* Allow Bricks content wrapper to overflow when containing full-width elements */
#brx-content:has(.full-width-breakout),
.brxe-container:has(.full-width-breakout) {
	overflow: visible !important;
}

/* ==========================================================================
   SPLIDE PAGINATION - Frosted Glass Effect
   Applies to ALL Splide sliders sitewide
   ========================================================================== */

.splide__pagination {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  gap: 10px !important;
}

.splide__pagination__page {
  background: rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.splide__pagination__page:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.splide__pagination__page.is-active {
  background: rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Modifier: Pagination flows below slides (not absolute) */
.splide--pagination-below .splide__pagination {
  position: static !important;
  margin-top: var(--space-m) !important;
  transform: none !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   TARGET SECTIONS - Scroll offset for anchor links
   Accounts for sticky header so sections don't scroll behind it
   ========================================================================== */

.target-section {
  scroll-margin-top: calc(var(--header-space, 80px) + var(--secondarynav-height, 0px) + var(--ticker-height, 0px));
}

/* ==========================================================================
   FOOTER NEWSLETTER FORM
   ========================================================================== */

footer .brxe-form {
  display: flex;
  align-items: stretch;
  gap: 0;
}

footer .brxe-form input[type="email"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  margin: 0;
}

footer .brxe-form .bricks-button {
  background: var(--secondary--alt) !important;
  color: var(--secondary) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border: none !important;
  padding: 0 1.5em !important;
  margin: 0 !important;
  transition: filter 0.2s ease;
}

footer .brxe-form .bricks-button:hover {
  filter: brightness(0.85);
}

/* ==========================================================================
   FOOTER LAYOUT FIXES
   ========================================================================== */

/* Remove extra space below footer */
html, body {
  min-height: 0;
}

#brx-content,
.brx-content,
main {
  min-height: 0;
}

/* Social icons - inline with copyright */
footer .brxe-social-icons {
  display: flex;
  gap: 0.75em;
  align-items: center;
}

footer .brxe-social-icons a {
  font-size: 1.1em;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

footer .brxe-social-icons a:hover {
  opacity: 1;
}

/* ==========================================================================
   GUTENBERG + BRICKS INTEGRATION
   Moved to scss/gutenblocks.scss (Sass with @extend support)
   Compile: sass scss/gutenblocks.scss assets/css/gutenblocks.css
   ========================================================================== */

/* ==========================================================================
   GSAP ANIMATION INITIAL STATES
   Prevents FOUC by hiding elements before JS animates them
   ========================================================================== */

.feature-cards__item {
    opacity: 0;
}

/* ==========================================================================
   INDICATION PAGES - Full-width Bricks sections in Gutenberg content
   ========================================================================== */

.single-indications .brxe-post-content .brxe-section {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   COMPONENT SHADOW TOGGLE
   Removes shadow when "no-shadow" class is applied via Bricks block property
   ========================================================================== */

.no-shadow,
.no-shadow.shadow,
.no-shadow.image-radius,
.image-radius.no-shadow,
.no-shadow .image-radius {
    box-shadow: none !important;
}

/* ==========================================================================
   BREADCRUMBS - No wrap + ellipsis on last item
   ========================================================================== */

.post--single-hero__breadcrumbs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post--single-hero__breadcrumbs .item:last-child {
    display: inline-block;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ==========================================================================
   PRIMARY BUTTONS - Sitewide color override
   ========================================================================== */

.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline) {
    color: var(--primary--alt) !important;
}

.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline):hover {
    color: var(--white, #fff) !important;
}

/* ==========================================================================
   GUTENBERG BUTTON - Match Bricks .btn styling
   Override Bricks link styling inside post-content
   ========================================================================== */

.wp-block-button__link,
.brxe-post-content .wp-block-button__link,
.brxe-post-content:not([data-source="bricks"]) .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs, 4px);
    padding: var(--space-xs, 8px) var(--space-s, 12px);
    background: var(--primary) !important;
    color: var(--primary--alt) !important;
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    border-radius: var(--radius-m, 8px);
    border: 1px solid var(--primary-d-1, var(--primary)) !important;
    box-shadow: var(--shadow-s, 0 1px 3px rgba(0,0,0,0.1));
    transition: all 0.25s ease-in-out;
    outline: 0;
    cursor: pointer;
    text-decoration: none !important;
}

.wp-block-button__link:hover,
.brxe-post-content .wp-block-button__link:hover,
.brxe-post-content:not([data-source="bricks"]) .wp-block-button__link:hover {
    background: var(--primary-d-1, var(--primary)) !important;
    color: var(--white, #fff) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   GLOBAL SEARCH INPUTS - Duotone magnifying glass icon
   ========================================================================== */

.pipeline-search-wrapper,
.publication-tag-search__input-wrap {
    position: relative;
}

.pipeline-search-input,
.publication-tag-search__input {
    padding-left: 2.75rem !important;
}

.pipeline-search-icon,
.publication-tag-search__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-search-icon img,
.publication-tag-search__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ==========================================================================
   STICKY PUBLICATION SEARCH - Fix ancestor overflow
   ========================================================================== */

#brx-content:has(.publication-tag-search-wrapper),
main:has(.publication-tag-search-wrapper),
.brxe-section:has(.publication-tag-search-wrapper),
.brxe-container:has(.publication-tag-search-wrapper),
.brxe-post-content:has(.publication-tag-search-wrapper),
[class*="brxe-"]:has(.publication-tag-search-wrapper) {
    overflow: visible !important;
}

/* ==========================================================================
   DATA CARDS - Reduce padding on mobile so text fits within small cards
   Grid stays 3-col on mobile, so cards are ~100-115px wide
   ========================================================================== */

@media (max-width: 767px) {
    .card-data {
        padding: var(--space-xs) !important;
    }
}