/*
 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
*/
/* ---- Brainvire replica global tokens ---- */
body, button, input, select, textarea {
  font-family: 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

/* ---- Carousel containment: track may never widen the page ---- */
.bv-carousel {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.bv-carousel .bv-track {
  min-width: 0;
}
.bv-carousel .bv-track > .bv-item {
  max-width: 100%;
}
#brx-content {
  overflow-x: clip;
}

/* ==== Mobile responsive (matching live brainvire.com mobile reflow) ==== */
@media (max-width: 767px) {
  .bv-g6 { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .bv-g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .bv-g3, .bv-g2 { grid-template-columns: 1fr !important; }
  .bv-row { flex-direction: column !important; }
  .bv-row > * { max-width: 100% !important; flex-basis: auto !important; width: 100% !important; }
  .bv-carousel .bv-track > .bv-item { flex: 0 0 92% !important; }
  /* hero  [2026-08-14] side padding removed: the current design system supplies its own
     gutter via .fh .wrap, so this stacked a second 20-22px inset on every page. */
  /* [2026-08-14] blanket h1/h2 sizing removed: the bare `h2` selector with !important
     was flattening every heading in the current design system to 28px on mobile,
     overriding its own clamp() based scale. */
  [data-bv-slide] img[style*="width:110px"] { width: 62px !important; height: 56px !important; }
  /* hero card padding  [2026-08-14] DISABLED. Written for the previous build where the
     first section was only the hero. In the current build the whole page is one section,
     so this inset every template by 22px a side and rounded the page corners on mobile.
     .fh .wrap already provides the gutter. */
  /* header: live mobile = logo + hamburger */
  #brx-header .brxe-button, #brx-header .brxe-search { display: none !important; }
  #brx-header .brxe-image img { width: 140px !important; }
  #brx-header > section > .brxe-container { height: 64px !important; padding: 0 18px !important; }
  /* GP offices single column */
  #bv-gp-panels [data-bv-panel] > div { flex: 0 0 100% !important; }
  #bv-gp-panels { padding: 8px 20px !important; }
  /* industries panel image */
  [data-bv-panel^="ind"] img { flex-basis: auto !important; max-width: 100% !important; }
  [data-bv-panel^="ind"] h3 { font-size: 30px !important; }
  /* forms fill width */
  [data-bv-slide] div[style*="flex:0 0 400px"], div[style*="flex:0 0 380px"] { flex-basis: auto !important; width: 100% !important; }
  /* stats rows wrap */
  .bv-row div[style*="display:flex"] { flex-wrap: wrap !important; }
}

/* WCAG AA fix 2026-09-22 (GCC-41 audit, blocker 5).
   .fh .svc-grid.gx4b .idx shipped as rgba(255,255,255,.42) at 14px/700 over a dark
   gradient = 3.13-3.79:1, below the 4.5:1 requirement. The .85 value was already proven
   on /qa/shopify/ and /om/shopify/ (~10:1). One ID in the selector so it beats the
   4-class base rule regardless of source order. Verify by COMPUTED value, not by
   grepping for this rule - that was the specificity trap noted in the audit. */
#brx-content .fh .svc-grid.gx4b .idx{color:rgba(255,255,255,.85)}