/*
Theme Name: Sustain Sites
Theme URI: https://sustainsites.com
Description: A child theme for Ollie.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/

/*
================================================================================
WP FSE GLOBAL VARIABLE CHEATSHEET (REFERENCE ONLY)
================================================================================

--- Color Palette ---
--wp--preset--color--primary
--wp--preset--color--secondary
--wp--preset--color--tertiary
--wp--preset--color--background
--wp--preset--color--text
--wp--preset--color--link
--wp--preset--color--contrast
--wp--preset--color--accent

--- Typography: Font Sizes ---
--wp--preset--font-size--x-small
--wp--preset--font-size--small
--wp--preset--font-size--base
--wp--preset--font-size--medium
--wp--preset--font-size--large
--wp--preset--font-size--x-large
--wp--preset--font-size--xx-large

--- Spacing: Margins & Padding ---
--wp--preset--spacing--small
--wp--preset--spacing--medium
--wp--preset--spacing--large
--wp--preset--spacing--x-large
--wp--preset--spacing--xx-large
--wp--preset--spacing--xxx-large
--wp--preset--spacing--xxxx-large

--- Effects: Shadows ---
--wp--preset--shadow--small-light

--- Layout: Global Widths ---
--wp--style--global--content-size
--wp--style--global--wide-size

--- Borders
radius: 15px | 20px | 25px
 --wp--preset--color--border-light

--- BEM Example: Block ---
.sts-card { ... } 

/* Elements
.sts-card__image { ... }
.sts-card__title { ... }
.sts-card__copy  { ... }

/* Modifiers
.sts-card--shadow   { ...}
.sts-card--dark     { ... }

===============================================================*/
@view-transition {
  navigation: auto;
}

/* editor styles */

.editor-styles-wrapper .wp-block-post-title {
  font-size: var(--wp--preset--font-size--medium);
}

.editor-visual-editor__post-title-wrapper {
  border-bottom: 1px dotted #000000;
}

.page-template-page-no-title .wp-site-blocks {
  max-width: 2500px;
  margin-inline: auto;
/*   border: solid 1px var(--wp--preset--color--border-light); */
  box-shadow: var(--wp--preset--shadow--small-light);
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none !important;
}

span.browheading {
    font-size: var(--wp--preset--font-size--large);
}

/* nav hover */
.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}

 .wp-block-navigation-item__content {
    background: linear-gradient(currentColor 0 0) bottom left/
      var(--underline-width, 0%) 0.1em no-repeat;
    display: inline-block;
    padding: 0 0.5em 0.2em;
    text-decoration: none;
    transition: background-size 0.5s;
    padding: 0;
  }

  .wp-block-navigation-item__content:hover,
  .wp-block-navigation__container .current-menu-item > a {
    --underline-width: 100%;
    text-decoration: none !important;
  }

.sts-client-slides {
  overflow: hidden;
}

/* utilities*/
.sts-u-shadow {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.sts-u-scroll-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  bottom: 0px;
  pointer-events: none;
  height: 134px;
  position: fixed;
  z-index: 10;
  flex: none;
  order: 1003;
  left: 0;
  right: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(#0000 37%, #000 83%);
  mask: linear-gradient(#0000 37%, #000 83%);
}


header.site-header.wp-block-template-part {
  background: rgba(255, 255, 255, 0);
}

.sts-hero-highlight {
  background: linear-gradient(180deg, #b50000 52%, rgb(103 60 60) 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    /* filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4)); */

}

/* .sts-hero h1,
.sts-hero p,
.sts-hero .sts-stats {
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
} */

/* .is-style-button-brand {
  --border-bottom-width: 1px;
  --border-color: rgba(255, 255, 255, 0);
  --border-left-width: 1px;
  --border-right-width: 1px;
  --border-style: solid;
  --border-top-width: 1px;
  background: linear-gradient(
    180deg,
    var(--token-3c2137a7-28d2-42e0-80e1-80e734e116d0, rgb(74, 143, 242)) 0%,
    var(--token-bb35e806-755f-4adf-8db1-448509c9a281, rgb(55, 114, 196)) 100%
  );
  border-radius: 10px;
  opacity: 1;
  will-change: auto;
} */

/* .sts-btn--primary .wp-block-button__link {
    position: relative;
    background: var(--wp--preset--color--primary) !important;
    border-radius: 16px;
    z-index: 1;
}

.sts-btn--primary .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 5px; left: 10px; right: 10px; bottom: -5px;
    background: radial-gradient(circle, var(--wp--preset--color--primary) 0%, transparent 75%);
    filter: blur(20px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.sts-btn--primary .wp-block-button__link:hover::before {
    opacity: 0.7;
} */

/* Nav hover animation */

/* sticky header */
.page-template-page-no-title .site-header {
  position: sticky;
  top: .2rem;
  z-index: 100;
  max-width: calc(var(--wp--style--global--wide-size) + 3.5rem);
  margin: 0 auto;
  /* animation-delay: 0.1s;
  animation: fadeIn 0.6s; */
}

/* content under nav */
.page-template-page-no-title {
  margin-top: -7rem;
}
.wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #222222;
}


/* .wp-block-navigation__responsive-container-open {
  background: rgba(0, 0, 0, 0);
  color: #fff;
}

.wp-block-navigation__responsive-container-close {
  background: #fff;
} */

/* .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  margin: 0 auto;
  color: #fff !important;
  text-align: center;
}


.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-page-list {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  margin-top: 5rem;
} */

/* .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container
  a {
  color: #ffffff;
} */


/* 1. Ensure the button link can handle the positioning */
.sts-btn--primary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  z-index: 1;
}

/* 2. The Subtle Arrow Slide */
.sts-btn--primary .wp-block-button__link .wp-block-button__link-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* A little "snap" to the movement */
}

.sts-btn--primary:hover .wp-block-button__link-icon {
  transform: translateX(5px); /* Moves the arrow slightly to the right */
}

/* 3. Your Existing Glow Effect */
.sts-btn--primary .wp-block-button__link::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50px;
 background: radial-gradient(50% 50% at 50% 50%, #cf4646 0%, var(--wp--preset--color--secondary) 100%);  
 filter: blur(10px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sts-btn--primary:hover .wp-block-button__link::before {
  opacity: 0.7;
}

 /* form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
  } */
  .ff-default .ff-el-form-control{
background-color: #222222 !important;
  border: solid 1px rgba(255,255,255,.3) !important;
}

.ff-default input::placeholder{
font-family: Playfair Display !important;}
.ff-default .ff-el-input--label label{
font-family: Montserrat !important;}

 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--wp--preset--color--primary) !important;
  font-family: Montserrat !important;
  text-transform: uppercase; 
font-size: var(--wp--preset--font-size--small);
  width: 75%;
}

.hero-text-grid-custom {
    width: 100%;
    max-width: 26em;
}

@media (max-width: 667px){
    .hero-text-grid-custom h4 {
        font-size: 14px !important;
    }
    
    .hero-text-grid-custom h6 {
        font-size: 10px;
    }
    
    .hero-text-grid-custom {
        gap: 8px;
    }
}

/* Outer columns block becomes the scrollable track */
.fleet-carousel-wrap.wp-block-columns {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 16px;
  transition: transform 0.55s ease;
  will-change: transform;
  overflow: visible; /* clipped by parent viewport div — see JS */
}

/* Each column is a fixed-width card */
.fleet-carousel-wrap .wp-block-column {
  flex: 0 0 calc((100% - 48px) / 4) !important;
  width: auto !important;
  min-width: 0 !important;
}

.fleet-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

/* Clip wrapper — JS wraps the columns block in this */
.fleet-clip {
  overflow: hidden;
}

 /* marquee */

  .logo-carousel-section {
      padding: 4rem 1rem;
      background: var(--bg-light);
      margin-top: 2rem;
    }

    .carousel-container {
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .carousel-track {
      display: inline-block;
      animation: scroll 30s linear infinite;
    }

    .carousel-item {
    display: inline-block;
    margin: 0 40px;
    vertical-align: middle;
    opacity: 0.4;
    transition: opacity 0.3s, color 0.3s;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue-dark);
    letter-spacing: 1px;
    font-family: 'Montserrat';

    }

    .carousel-item:hover {
      opacity: 1;
      color: var(--accent-orange);
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }


/* Remove .sts-card from these selectors — only target actual images */
.sts-card img,
.sts-card .wp-block-cover__image-background,
.sts-card .wp-block-cover__video-background {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform: translate3d(0,0,0) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.sts-card:hover img,
.sts-card:hover .wp-block-cover__image-background,
.sts-card:hover .wp-block-cover__video-background {
  transform: translate3d(0,0,0) scale3d(1.1,1.1,1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg) !important;
}

/* Handle inline background-image cards with a pseudo-element */
.sts-card {
  position: relative;
  overflow: hidden;
}

.sts-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;   /* pulls the inline background-image */
  background-position: inherit;
  background-size: inherit;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(0,0,0) scale3d(1,1,1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 0;
  filter: grayscale(100%);
}

.sts-card:hover::before {
  transform: translate3d(0,0,0) scale3d(1.1,1.1,1.1);
  filter: grayscale(0%);

}

/* Lift card content above the pseudo-element */
.sts-card > * {
  position: relative;
  z-index: 1;
}
/* 4. Optional: Keep text/content static so it doesn't zoom with the BG */
.sts-card .wp-block-cover__inner-container {
  transition: transform 0.8s ease;
  z-index: 2;
}

@media only screen and (max-width: 781px) {
  header .wp-block-site-logo img {
    max-width: 110px;
    position: relative;
    z-index: 1000000;
}
}

/* Media Queries*/
@media (max-width: 780px) {
  /* .pi-nav{
    order:2;
  } */
}

@media (max-width: 600px) {
  /* Mobile styles */
}