/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/



/* SITE WIDE CONTAINER
 * 
 * Force zero top and bottom margin(spacing should be controlled via padding within a container)
 * 
 * Must use 100% width container, NOT site width
 * 
*/
.container-fullwidth{
  margin: 0 auto !important;
}



/* Container for anything smaller than 1500
 * 
 * keep 100% width, ensure 30px of padding
 * 
*/
@media(max-width: 1500px){
  .container-fullwidth{
    /*padding-left: 30px !important;
    padding-right: 30px !important;
  */}
}

/* 125% display zoom / laptop width */
@media(min-width:1500px) and (max-width: 1700px){
  .container-fullwidth{
    max-width: 1360px !important;
  }
}

/* desktop and larger displays */
@media(min-width:1700px){
  .container-fullwidth{
    max-width: 1580px !important;
  }
}



/* Class for painting backgrounds and images full width behind container system
 * 
 * For background colors, Use gradients rather than background color
 * 
 */
.background-fullwidth {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

.background-fullwidth::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.background-fullwidth > .fusion-builder-row {
  position: relative;
  z-index: 1;
}

/* Avada creates an explicit-width wrapper for ratio-controlled images, but its
 * inner frame otherwise falls back to the attachment's intrinsic width. */
.fusion-imageframe.has-aspect-ratio {
  width: 100%;
}

/* Avada's absolute container needs both horizontal anchors for auto margins
 * to keep the child-theme max-width contract centered. */
.fusion-tb-header .fusion-absolute-container.container-fullwidth {
  left: 0;
  right: 0;
}



/* Talus button shadow helper. Add talusauto-button-shadow to the native Avada
 * button element; sizing, typography, radius, and colors remain Global Options. */
body .fusion-button.talusauto-button-shadow {
  overflow: visible !important;
  box-shadow: 0 12px 26px rgba(215, 25, 25, 0.2) !important;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease !important;
}

body .fusion-button.talusauto-button-shadow:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(215, 25, 25, 0.46) !important;
}

/* Preserve the manually maintained global-header CTA without rewriting its
 * Builder shortcode solely to add the helper class. */
body .fusion-button[style*="--button_gradient_top_color:#bf1515" i] {
  box-shadow: 0 12px 26px rgba(215, 25, 25, 0.2) !important;
}

body .fusion-button[style*="--button_gradient_top_color:#bf1515" i]:hover {
  box-shadow: 0 16px 30px rgba(215, 25, 25, 0.46) !important;
}

/* Homepage service cards use Avada column links for the full-card click target.
 * Motion remains restrained and keyboard focus gets the same visual affordance. */
.talusauto-service-card-link {
  cursor: pointer;
  min-height: 0;
  margin-bottom: 34px !important;
  transition:
    transform 190ms ease,
    box-shadow 190ms ease,
    filter 190ms ease !important;
}

.talusauto-service-card-link:hover,
.talusauto-service-card-link:focus-within {
  z-index: 2;
  transform: translateY(-7px);
  filter: brightness(1.06);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.62) !important;
}

.talusauto-service-card-link .fusion-button {
  font-size: 17px !important;
  line-height: 1.35 !important;
}

.talusauto-related-service-card-link {
  min-height: 420px;
}

/* Car Maintenance workflow prototype. The lists remain semantic Builder text
 * content; these rules provide the compact red markers and payment chips. */
.talusauto-workflow-prototype .talusauto-workflow-list ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.talusauto-workflow-prototype .talusauto-workflow-list li {
  position: relative;
  margin: 0;
  padding-left: 20px;
}

.talusauto-workflow-prototype .talusauto-workflow-list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2525;
}

.talusauto-workflow-prototype .talusauto-payment-options ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.talusauto-workflow-prototype .talusauto-payment-options li {
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #101010;
}

@media (prefers-reduced-motion: reduce) {
  .talusauto-service-card-link {
    transition: none !important;
  }

  .talusauto-service-card-link:hover,
  .talusauto-service-card-link:focus-within {
    transform: none;
  }
}

/* About progress slideshow: use Avada's native linked pagination beneath the
 * image, omit the side arrows, and clip the viewport to the site shape. */
.talusauto-building-slider .flex-viewport,
.talusauto-building-slider .slides,
.talusauto-building-slider .slides > li,
.talusauto-building-slider .slides img {
  border-radius: 0 64px 0 64px;
}

.talusauto-building-slider {
  margin-bottom: 44px !important;
  overflow: visible !important;
}

.talusauto-building-slider .flex-viewport {
  overflow: hidden !important;
}

.talusauto-building-slider .flex-direction-nav {
  display: none !important;
}

.talusauto-building-slider .flex-control-nav {
  bottom: 39px !important;
  display: flex !important;
  justify-content: center;
  gap: 9px;
  height: 5px;
}

.talusauto-building-slider .flex-control-nav li {
  margin: 0 !important;
}

.talusauto-building-slider .flex-control-nav li a {
  width: 42px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #3b3b3b !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, transform 180ms ease;
}

.talusauto-building-slider .flex-control-nav li a:hover,
.talusauto-building-slider .flex-control-nav li a.flex-active {
  background: #d71515 !important;
  transform: scaleY(1.35);
}

/* The site's global accordion hover color is light. Talus boxed FAQs keep the
 * dark panel while retaining the useful red title/icon hover feedback. */
.fusion-accordian.talusauto-faq {
  --awb-hover-color: #090909 !important;
  --awb-toggle-hover-accent-color: #d71515 !important;
  --awb-toggle-active-accent-color: #d71515 !important;
}

.fusion-accordian.talusauto-faq .fusion-panel.fusion-toggle-boxed-mode:hover,
.fusion-accordian.talusauto-faq .fusion-panel.fusion-toggle-boxed-mode.hover {
  background-color: #090909 !important;
}

/* Contact page native OpenStreetMap element. */
.talusauto-contact-map {
  display: block;
  width: 100%;
}

/* Native Avada Form styling scoped to the Talus service-request instance. */
.talusauto-contact-form .fusion-builder-container,
.talusauto-contact-form .fusion-builder-row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.talusauto-contact-form .fusion-form-field label,
.talusauto-contact-form .fusion-form-field legend {
  color: #fff;
}

.talusauto-contact-form input,
.talusauto-contact-form textarea {
  background: #090909 !important;
  color: #fff !important;
  border-color: #353535 !important;
}

.talusauto-contact-form textarea {
  min-height: 118px;
}

.talusauto-contact-form .fusion-form-checkbox-field .fusion-form-checkbox-option {
  border: 1px solid #353535;
  border-radius: 4px;
  padding: 11px 12px;
  margin: 0 8px 8px 0;
}

@media (max-width: 800px) {
  /* Avada's global column spacing is useful between desktop panels, but its
   * inherited side margins otherwise squeeze native Form fields on phones. */
  .talusauto-contact-request > .fusion-builder-row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .talusauto-contact-panel > .fusion-column-wrapper,
  .talusauto-contact-form .fusion-column-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .talusauto-contact-form .fusion-fullwidth {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}