/*
 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) The real overflow bug: the top utility bar (#brxe-ea66d9) was built as a
      single NO-WRAP flex row (Get-an-Estimate button + phone + text, right-
      aligned) wider than a phone screen, which pushed the CTA + hamburger off to
      the right. Let it wrap and center so the whole header fits on screen.
   ----------------------------------------------------------------------------- */
@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;
  }
  #brx-header,
  #brx-header > section,
  #brx-header .brxe-container {
    max-width: 100% !important;
  }
}