/*
 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
*/

.komet-bold-italic {
  font-family: "komet", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-synthesis: none !important;
}

.komet-semibold-italic {
  font-family: "komet", sans-serif !important;
  font-weight: 600 !important;
  font-style: italic !important;
  font-synthesis: none !important;
}

/* =============================================================================
   Adams Power Shower — FAS Forms brand styling
   Navy #2d4e8e labels, clean inputs, red #ad0d13 submit (matches site CTAs)
   ============================================================================= */
.fas-form .fas-form-fields { display: block; }

.fas-form .fas-field { margin-bottom: 18px; }

.fas-form .fas-field-label {
  display: block;
  color: #2d4e8e;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.fas-form .fas-field-label .fas-required,
.fas-form .fas-required { color: #ad0d13; margin-left: 2px; }

.fas-form .fas-input,
.fas-form .fas-textarea,
.fas-form .fas-select,
.fas-form input[type="text"],
.fas-form input[type="email"],
.fas-form input[type="tel"],
.fas-form select,
.fas-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: #353740;
  background: #ffffff;
  border: 1px solid #cbd2da;
  border-radius: 5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fas-form .fas-input:focus,
.fas-form .fas-textarea:focus,
.fas-form .fas-select:focus,
.fas-form input:focus,
.fas-form select:focus,
.fas-form textarea:focus {
  outline: none;
  border-color: #2d4e8e;
  box-shadow: 0 0 0 3px rgba(45, 78, 142, .15);
}
.fas-form .fas-textarea,
.fas-form textarea { min-height: 130px; resize: vertical; }

.fas-form .fas-input::placeholder,
.fas-form .fas-textarea::placeholder { color: #9aa3ad; }

.fas-form .fas-field-error { color: #ad0d13; font-size: 13px; margin-top: 5px; }

.fas-form .fas-form-footer { margin-top: 22px; }

.fas-form .fas-submit-button {
  background: #ad0d13;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 36px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.fas-form .fas-submit-button:hover { background: #8c0a0f; }
.fas-form .fas-submit-button:active { transform: translateY(1px); }

/* success / error messages */
.fas-form .fas-form-messages .fas-message-success {
  background: #ecfdf3; border: 1px solid #34d399; color: #065f46;
  padding: 14px 16px; border-radius: 5px;
}
.fas-form .fas-form-messages .fas-message-error {
  background: #fef2f2; border: 1px solid #ad0d13; color: #8c0a0f;
  padding: 14px 16px; border-radius: 5px;
}

/* Lightbox images (e.g. testimonial letters): hover cue to signal clickability */
.brxe-image.bricks-lightbox { cursor: pointer; }
.brxe-image.bricks-lightbox img { transition: transform .2s ease, box-shadow .2s ease; }
.brxe-image.bricks-lightbox:hover img {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(45, 78, 142, .18);
}

/* =============================================================================
   Mobile / responsive QA — stack multi-column page-body & footer layouts so the
   2-col forms/FAQ, 3-col galleries/cards, and fixed-width text don't cramp or
   overflow on phones & small tablets. (Header has its own hamburger menu.)
   ============================================================================= */
@media (max-width: 767px) {
  /* tighter side padding on small screens */
  #brx-content section.brxe-section > .brxe-container { padding-left: 18px !important; padding-right: 18px !important; }

  /* stack any row layout (page body + footer) into a single column */
  #brx-content .brxe-container, #brx-content .brxe-block,
  #brx-footer  .brxe-container, #brx-footer  .brxe-block {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  /* columns/text/images/headings go full width so they stack instead of squishing */
  #brx-content .brxe-block, #brx-content .brxe-text-basic, #brx-content .brxe-heading, #brx-content .brxe-image,
  #brx-footer  .brxe-block {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* keep images centered (not forced edge-to-edge) and buttons natural width */
  #brx-content .brxe-image { margin-left: auto !important; margin-right: auto !important; }
  #brx-content .brxe-button { width: auto !important; align-self: center !important; }
  /* slightly smaller H1 on phones */
  #brx-content h1.brxe-heading { font-size: 30px !important; line-height: 1.25 !important; }
}

/* =============================================================================
   Sticky shrink header — once the page is scrolled, collapse the top blue bar
   and trim the nav row's vertical padding (and ease the logo down a touch). The
   `aps-scrolled` class is toggled on #brx-header by the small script in the
   child theme's functions.php (scroll threshold is set there).
   Header sections in this build: #brxe-d64e06 = top blue bar, #brxe-zhvudd = nav
   row, #brxe-hgtsib = logo. The :first-of-type / :nth-of-type(2) fallbacks keep
   this working even if those auto-IDs change in a future header edit.
   Tweakables: top-bar max-height, the nav padding, and the logo max-height.
   ============================================================================= */
#brx-header { transition: box-shadow .25s ease; }
#brx-header.aps-scrolled { box-shadow: 0 2px 12px rgba(38, 57, 84, .18); }

/* Top blue bar — collapses away on scroll */
#brx-header > section:first-of-type,
#brx-header #brxe-d64e06 {
  overflow: hidden;
  max-height: 120px; /* generous; lower this for a snappier collapse */
  transition: max-height .3s ease, padding-top .3s ease, padding-bottom .3s ease, opacity .25s ease;
}
#brx-header.aps-scrolled > section:first-of-type,
#brx-header.aps-scrolled #brxe-d64e06 {
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
}

/* Nav row — shrinks vertically on scroll */
#brx-header > section:nth-of-type(2),
#brx-header #brxe-zhvudd {
  transition: padding-top .3s ease, padding-bottom .3s ease;
}
#brx-header.aps-scrolled > section:nth-of-type(2),
#brx-header.aps-scrolled #brxe-zhvudd {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Logo — eases down a touch when the header shrinks */
#brx-header #brxe-hgtsib img { transition: max-height .3s ease; }
#brx-header.aps-scrolled #brxe-hgtsib img { max-height: 46px; width: auto; }

/* -----------------------------------------------------------------------------
   Mobile header fix (<=767px):
   1) Turn the sticky shrink OFF on phones — it's a desktop effect, and its
      overflow:hidden + max-height on the top bar otherwise clip it.
   2) Let the top utility bar (#brxe-ea66d9) wrap + center instead of one no-wrap
      right-aligned row that ran wider than a phone screen.
   3) The CORE overflow bug: #brx-header is position:fixed, so on phones it
      stretched to the page's horizontal-overflow width (~1200px) instead of the
      screen — dragging the nav + hamburger off-screen to the right. `max-width:
      100%` can't fix this (it resolves against that same wrong width); 100vw pins
      the header to the real viewport, and overflow-x:hidden clips the leftover
      fixed mobile-menu overlay so there's no residual horizontal scroll.
      (Verified with Playwright at 360–767px: document overflow 0, hamburger
      reachable + opens to the full menu; tablet/desktop unaffected.)
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #brx-header > section:first-of-type,
  #brx-header #brxe-d64e06,
  #brx-header.aps-scrolled > section:first-of-type,
  #brx-header.aps-scrolled #brxe-d64e06 {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  #brx-header #brxe-ea66d9 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px;
  }
  /* Pin the fixed header to the actual viewport, not the overflow width. */
  html, body { overflow-x: hidden !important; }
  #brx-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }
  #brx-header > section,
  #brx-header .brxe-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  #brx-header .brxe-container,
  #brx-header .brxe-block {
    flex-wrap: wrap !important;
  }
}

/* =============================================================================
   Fixed-header offset + mobile footer/slider fixes (2026-06-07)
   ============================================================================= */
/* #brx-header is position:fixed, so it was hovering over the top of the page
   (like absolute positioning) and covering content. Offset the body by the
   header height so content starts below it. This is a pre-JS fallback; the script
   in functions.php measures the exact (responsive, pre-shrink) header height and
   refines body padding-top on load + resize. */
body { padding-top: 155px; }

@media (max-width: 767px) {
  body { padding-top: 200px; } /* taller mobile header (top bar wraps); JS refines */

  /* Footer trust badges: the 3-column row is flex-column + flex-wrap + a fixed
     495px height, which made BBB + Family/Veteran wrap into off-screen columns to
     the right (only "Angie's List" showed). Drop the fixed height so they stack. */
  #brx-footer #brxe-vysrlr,
  #brx-footer #brxe-joljth { height: auto !important; }
  #brx-footer #brxe-joljth { flex-wrap: nowrap !important; }

  /* Hero before/after slider: the image is wider than a phone, so cover-cropping
     showed only the middle ("FORE…AFTE"). Contain it so the whole photo shows. */
  #brx-content .brxe-slider .image,
  #brx-content .brxe-slider [class*="image"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}