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

html {
  scrollbar-gutter: stable;
}


/* bdt-donut-chart */
.bdt-donut-chart {
  position: relative;
  margin-inline: auto;
  width: 100%;
  /* definite height at first paint (chart + legend), so late Chart.js
     sizing never changes section layout */
  aspect-ratio: 4 / 5;
}
.bdt-donut-chart canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.bdt-donut-chart__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e0e3e7;
  color: #103f6a;
  font-size: 14px;
  text-align: center;
}
.bdt-donut-chart__empty {
  color: #818ea0;
  text-align: center;
}

/* Sections must always grow with their content. Bricks' sticky-footer flex
   chain (body flex-column + #brx-content flex:1) can freeze section heights
   computed before late-sizing content (charts) exists. */
#brx-content > .brxe-section { min-height: max-content; }
.brxe-section > .brxe-container { min-height: max-content; }

/* Short pages: complete the sticky-footer chain.
   Bricks gives #brx-content flex:1 inside a flex-column body, but the body
   never gets a viewport min-height, so on a page shorter than the screen the
   footer floats up and leaves the page background showing beneath it. Every
   other page here is taller than the viewport, which is why the 404 is the
   first place it shows.
   The section is then told to grow so the panel itself fills the gap rather
   than opening a band of empty background above the footer. Scoped to the 404
   because #brx-content is display:block everywhere else and turning it into a
   flex column site-wide would change stacking for pages that do not need it. */
body { min-height: 100svh; }
body.error404 #brx-content {
  display: flex;
  flex-direction: column;
}
body.error404 #brx-content > .brxe-section {
  flex: 1 1 auto;
}

/* responsive safety rails */
svg.brxe-svg, .brxe-svg svg { max-width: 100%; height: auto; }
body { overflow-x: clip; }

/* Section entry reveal.
   Structural rather than class-based: every section is a direct child of
   #brx-content, so nothing has to be tagged in the builder, and the header and
   footer are excluded for free by sitting outside it.

   The hidden state is gated on html.wu-reveal, which a small script in <head>
   adds before first paint. That gate is what makes this safe: with no JS, with
   no IntersectionObserver, or under a reduced-motion preference, the class is
   never added and every section simply renders in its final state. Bricks'
   own Interactions do the opposite — they hide server-side and depend on JS
   arriving to undo it. */
.wu-reveal #brx-content > .brxe-section {
  opacity: 0;
  transform: translateY(var(--motion-reveal-shift));
}
/* Transition declared on the end state, matching the menu-grid entry recipe. */
.wu-reveal #brx-content > .brxe-section[data-wu-reveal="in"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal), transform var(--motion-reveal);
}
/* Settled. A separate state rather than simply dropping the attribute, because
   without an attribute the section falls back to the hidden rule above and
   disappears again. Visible, untransformed and untransitioned: nothing is left
   on a compositor layer once the reveal is over. */
.wu-reveal #brx-content > .brxe-section[data-wu-reveal="done"] {
  opacity: 1;
  transform: none;
}

/* Hover/focus motion is defined per component (see the --motion-hover token).
   Honour a reduced-motion preference globally rather than repeating the guard
   in every class: the state changes still apply, they just stop animating.

   The section reveal above is deliberately NOT listed here. This block stops
   visible things from moving; the reveal has to be prevented from hiding
   anything in the first place, which happens upstream in the head script. */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-card .portfolio-card__media,
  .link-cta .link-cta__icon,
  .link-cta a,
  .btn {
    transition: none !important;
  }
  /* !important is required, not lazy: the component rules are authored at
     higher specificity (.portfolio-card.portfolio-card:hover) to outrank
     Bricks' generated CSS, so a plain override here would lose and the motion
     would still play for someone who asked for less of it. */
  .portfolio-card:hover { transform: none !important; }
  .portfolio-card:hover .portfolio-card__media { transform: none !important; }
  .link-cta:hover .link-cta__icon { transform: none !important; }
  .btn:hover { transform: none !important; }
}


/* Impact KPI grid — single column below 1024.

   1024 is not one of the site's Bricks breakpoints (1279 / 991 / 767 / 478), so the native
   grid controls cannot express it.

   Bricks emits its native three-column rule as `.kpi-panel--block.brxe-block` — (0,2,0),
   and in an inline <style> that loads AFTER this file, so matching that specificity is not
   enough to win. The leading `body` takes this to (0,2,1).

   This lives here rather than in the class's Custom CSS because the Advanced Themer Grid
   Builder regenerates that field and would overwrite it. */
@media (max-width: 1024px) {
  body .kpi-panel--block.kpi-panel--block {
    grid-template-columns: 1fr;
  }
}