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

/* esa-pages.css now enqueued via mu-plugin esa-page-css.php (filemtime cache-bust) */


/* =============================================================================
   ESA — Bricks reset & base
   Equipment Sales Australia (equipsales.au revamp)

   CASCADE STRATEGY — read before editing
   --------------------------------------
   Bricks 2.x wraps ALL of its CSS (frontend defaults AND per-element builder
   styles) in `@layer bricks`. Any UNLAYERED css in this file would therefore
   beat everything you set in the builder — including per-element settings.
   That is a trap, so this file never writes unlayered rules. Two tiers only:

   1. `@layer bricks.reset`  — generic normalisation. Ordered FIRST inside the
      bricks layer, so literally anything set in the builder overrides it.
      Put safe, opinion-free defaults here.

   2. `@layer bricks`        — deliberate overrides of Bricks' own defaults.
      Same layer as Bricks' frontend css but loaded later, so equal-specificity
      rules win; per-element styles (`#brxe-xxxxxx`, 1-0-0) still beat these
      (0-1-0). Put intentional fixes here.

   Tokens (--esa-violet, --space-*, --text-*, --container-*) are Bricks global
   variables. Fallback values are inlined so this file also works standalone.
   ============================================================================= */

@layer bricks.reset {

  /* Predictable box model everywhere. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Honour the user's font-size preference; no iOS text inflation. */
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Media never escapes its container. */
  :where(img, picture, video, canvas, svg, iframe) {
    display: block;
    max-width: 100%;
  }

  :where(img, video) {
    height: auto;
  }

  /* Form controls inherit typography instead of the browser's. */
  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  /* Long words / URLs must not blow out narrow columns. */
  :where(p, li, h1, h2, h3, h4, h5, h6, dd, dt, figcaption) {
    overflow-wrap: break-word;
  }

  /* Nicer line breaking for display type. Deliberately not applied to any
     heading GSAP's SplitText will split into lines — balance interferes with
     line measurement — so it stays off h1/h2 site-wide. */
  :where(h3, h4) {
    text-wrap: balance;
  }

  /* The Stage 1 pages are authored against these base resets. The HTML/CSS
     converter only carries `.esa-*` class rules into Bricks, so element-level
     resets have to live here or lists arrive with bullets and default margins. */
  :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(p) {
    margin: 0;
  }

  :where(a) {
    color: inherit;
    text-decoration: none;
  }

  :where(p) {
    text-wrap: pretty;
  }

}

@layer bricks {

  /* ---------------------------------------------------------------------------
     1. CONTAINER WIDTH FIX  (the "global max-width" problem)

     Bricks ships `.brxe-container { width: 1100px }` — a FIXED width, not a
     max-width. On narrow viewports that container stays 1100px wide and causes
     horizontal overflow, and it can never be made fluid from the design system.

     Fix: fluid by default, capped by a token, with horizontal padding so content
     never touches the viewport edge. Per-element width settings from the builder
     still win (id selectors beat this class selector).
     --------------------------------------------------------------------------- */
  .brxe-container {
    width: 100%;
    max-width: var(--container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--container-pad, clamp(1.25rem, 4vw, 3rem));
  }

  /* Sections are always full-bleed; the container inside them does the capping. */
  .brxe-section {
    width: 100%;
    max-width: 100%;
  }

  /* Width utilities — add as a class on any container/block in the builder. */
  .esa-w-wide {
    max-width: var(--container-wide, 1440px);
  }

  .esa-w-narrow {
    max-width: var(--container-narrow, 960px);
  }

  /* Edge-to-edge: no cap, no side padding (hero media, full-bleed strips). */
  .esa-w-full {
    max-width: none;
    padding-inline: 0;
  }

  /* Break a child out of its capped parent, back to full viewport width. */
  .esa-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* ---------------------------------------------------------------------------
     2. OVERFLOW GUARD
     Full-bleed tricks and wide grids can introduce a horizontal scrollbar.
     `clip` (not `hidden`) contains it without breaking position: sticky.
     --------------------------------------------------------------------------- */
  body {
    overflow-x: clip;
  }

  /* Wide content scrolls inside itself rather than widening the page. */
  .esa-scroll-x {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------------------------------------------------------------------------
     3. ACCESSIBILITY BASELINE (WCAG AA — see design-system/MASTER.md)
     --------------------------------------------------------------------------- */

  /* Visible keyboard focus in brand violet, never removed. */
  :focus-visible {
    outline: 2px solid var(--esa-violet, #6F70B5);
    outline-offset: 2px;
  }

  /* Skip links / screen-reader-only text. */
  .esa-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Respect reduced-motion: kill animation, keep layout intact. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

}

@layer bricks {

  /* The search field sits inside a Bricks Form element, so the converter had
     nowhere to hang these class rules. They belong here anyway: the header is
     one template shared by every page. */
  .esa-search__icon { flex: none; }

  .esa-search__input {
    width: 100%;
    border: 0;
    background: none;
    font-size: var(--text-m);
    text-transform: uppercase;
  }

  .esa-search__input::placeholder {
    color: var(--ice-grey);
    opacity: 0.9;
  }

  .esa-search__input:focus { outline: none; }

  /* Bricks' own form defaults would otherwise repaint the field white. */
  .esa-search input,
  .esa-search .brxe-form input {
    background: none;
    border: 0;
    color: var(--ice-grey);
    padding: 0;
    height: auto;
    min-height: 0;
    box-shadow: none;
  }

}

/* Registered so the image-reveal veil can be animated, and given a default
   so `calc(1 - var(--esa-veil) * 0.6)` stays valid before any animation runs.
   Without this the whole filter is invalid and greyscale silently disappears. */
@property --esa-veil {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@layer bricks.reset {
  :root { --esa-veil: 0; }
}