/*
Theme Name: Bricks Child Theme
Theme URI: https://bricksbuilder.io/
Description: USA Blower Door. The site.css rules that name no site class (tokens, the reset layer, base, theme
  switching); the component rules are Bricks global classes. Generated by builds/bricks/convert.mjs from
  reference/css/site.css; fonts are Bricks Custom Fonts.
Author: Matchless Web
Template: bricks
Version: 1.0
Text Domain: bricks
*/
/* ── Role tokens ─────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --ubd-bg-page: light-dark(#f3f1ec, #131211);
  --ubd-bg-band: light-dark(#ebe8e2, #171614);
  --ubd-bg-panel: light-dark(#fbfaf8, #1c1a18);
  --ubd-bg-raised: light-dark(#efece6, #25221f);
  --ubd-bg-sunken: light-dark(#e6e3dc, #0d0c0b);
  --ubd-bg-field: light-dark(#ffffff, #0d0c0b);
  --ubd-bg-plate: light-dark(#ffffff, #f3f4f6);
  --ubd-bg-inverse: light-dark(#1c1a18, #f3f4f6);
  --ubd-bg-hero-foot: light-dark(#f3f1ec, #0d0c0b);
  --ubd-bg-hero: var(--base-ultra-dark); /* the photo band: #0d0c0b in both modes */

  --ubd-text-strong: light-dark(#1c1a18, #f3f4f6);
  --ubd-text: light-dark(#36322e, #e4e7eb);
  --ubd-text-muted: light-dark(#5c5751, #a3aab3);
  --ubd-text-primary: light-dark(#b91818, #f26158);
  --ubd-text-inverse: light-dark(#f3f4f6, #0d0c0b);
  --ubd-ink: light-dark(#4a4540, #c3c8cf);
  --ubd-ink-faint: light-dark(#857f77, #6b727b);
  --ubd-accent-ink: light-dark(#4f6478, #8faac4);
  --ubd-mark: light-dark(#d41e1e, #ed2727);

  --ubd-line: light-dark(rgb(28 26 24 / 0.13), rgb(228 231 235 / 0.11));
  --ubd-line-strong: light-dark(rgb(28 26 24 / 0.24), rgb(228 231 235 / 0.2));
  --ubd-grid-minor: light-dark(rgb(28 26 24 / 0.045), rgb(228 231 235 / 0.035));
  --ubd-grid-major: light-dark(rgb(28 26 24 / 0.085), rgb(228 231 235 / 0.06));
  --ubd-field-border: light-dark(#8a847c, #6b727b);
  --ubd-focus: light-dark(#b91818, #f26158);
  --ubd-overlay: light-dark(rgb(28 26 24 / 0.5), rgb(8 7 6 / 0.74));

  /* The secondary button (ACSS primary outline, recolored below). */
  --ubd-btn-2-bg: light-dark(rgb(255 255 255 / 0.55), rgb(13 12 11 / 0.35));
  --ubd-btn-2-border: light-dark(rgb(28 26 24 / 0.34), rgb(228 231 235 / 0.2));
  --ubd-btn-2-text: light-dark(#1c1a18, #f3f4f6);
  --ubd-btn-2-bg-hover: light-dark(#1c1a18, #2e2a26);
  --ubd-btn-2-border-hover: light-dark(#1c1a18, #6b727b);
  --ubd-btn-2-text-hover: #f3f4f6;

  /* Type families. ACSS 4.0.1 sets no font families of its own. */
  --ubd-font-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, Impact, sans-serif;
  --ubd-font-text: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ubd-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* The sticky header row. Not ACSS's --header-height, which feeds its scroll offset. */
  --ubd-header-height: 72px;

  /* Non-color tokens, light values. light-dark() takes colors only. */
  --ubd-shadow-card: 0 18px 36px -22px rgb(28 26 24 / 0.34);
  --ubd-shadow-menu: 0 16px 32px -14px rgb(28 26 24 / 0.24);
  --ubd-shadow-modal: 0 30px 60px -24px rgb(28 26 24 / 0.42);
  --ubd-shadow-cover: drop-shadow(0 14px 16px rgb(28 26 24 / 0.24));
  --ubd-show-on-light: block; /* which logo file shows */
  --ubd-show-on-dark: none;
}
/* The dark choice, from the switch or ?theme=dark. ACSS's own .scheme--dark sets color-scheme: dark. */
html[data-site-theme="dark"] {
  color-scheme: dark;
}
/* Non-color tokens, dark values: the whole page in dark mode, and the bands that stay dark. */
html[data-site-theme="dark"],
.scheme--dark {
  --ubd-shadow-card: 0 30px 60px -30px rgb(0 0 0 / 0.8);
  --ubd-shadow-menu: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --ubd-shadow-modal: 0 40px 80px -20px rgb(0 0 0 / 0.8);
  --ubd-shadow-cover: drop-shadow(0 24px 30px rgb(0 0 0 / 0.55));
  --ubd-show-on-light: none;
  --ubd-show-on-dark: block;
}
/* A band that stays dark re-reads the text color: the inherited color was resolved against the page. */
.scheme--dark {
  color: var(--ubd-text);
}
/* ── Base: what ACSS's defaults need on top ──────────────────────────────────────────────────────────── */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  /* Concept A jumps. The shared settings turn ACSS Smooth Scrolling off; this holds if it is switched on. */
  scroll-behavior: auto;
  /* Etch reserves a stable gutter; concept A does not, so the layout keeps the full viewport width. */
  scrollbar-gutter: auto;
}
body {
  display: block;
  margin: 0;
  font-family: var(--ubd-font-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ACSS fades the body background on every change; concept A cross-fades only while switching. */
  transition: none;
}
@layer ubd-reset {
  h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, figure, blockquote, address, form, fieldset, label {
    margin: 0;
  }
  h1, h2, h3, h4 {
    text-wrap: balance;
  }
  /* Bricks sets optimizeLegibility on headings, which Firefox and Safari render differently from auto. */
  h1, h2, h3, h4, h5, h6 {
    text-rendering: auto;
  }
  p, li, dd, address, blockquote, label {
    text-wrap: pretty;
  }
  ul, ol {
    padding: 0;
    list-style: none;
  }
  figure, blockquote, dl, dd, fieldset {
    padding: 0;
  }
  fieldset {
    border: 0;
  }
  /* Bricks styles every blockquote (serif, 1.3em, a 4px left rule, relative); concept A's is plain text. */
  blockquote {
    position: static;
    border: 0;
    font: inherit;
  }
  address, cite {
    font-style: normal;
  }
  img, svg, video, iframe {
    display: block;
    vertical-align: middle;
  }
  /* Bricks gives an SVG without a width or height attribute a 1em minimum size. */
  svg {
    min-width: auto;
    min-height: auto;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  /* Concept A's images are square. The shared settings turn ACSS Auto Radius off; this answers the builder. */
  img {
    border-radius: 0;
  }
  button, input {
    margin: 0;
    padding: 0;
    border: 0 solid;
    border-radius: 0;
    background: transparent;
    color: inherit;
    letter-spacing: inherit;
  }
  /* The browser centers button text; Bricks sets start. Appearance as concept A's preflight (and Bricks). */
  button {
    text-align: center;
    appearance: button;
  }
  button:not(:disabled) {
    cursor: pointer;
  }
  summary {
    list-style: none;
    cursor: pointer;
  }
  summary::-webkit-details-marker {
    display: none;
  }
}
::selection {
  background: var(--primary);
  color: #fff;
}
/* ACSS's link hover (Links settings: --link-color-hover) sits in a layer, where every BEM link color below
   would beat it. The same rule unlayered, at ACSS's own specificity (0,1,2): a link class that sets a color
   still turns --text-strong on hover, and a class with its own :hover rule still wins. It leaves out
   .skip-link, whose hover color is ACSS's own .skip-link:hover (in the same layer, which beat the link rule). */
@media (hover: hover) and (pointer: fine) {
  body a:where(:not([class*="btn--"], .skip-link)):hover {
    color: var(--link-color-hover);
  }
}
/* ── Buttons ─────────────────────────────────────────────────────────────────────────────────────────── */
.btn--primary {
  --btn-transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  /* Concept A's primary border is transparent; ACSS paints it in the background color. */
  --btn-border-color: transparent;
  --btn-border-color-hover: transparent;
  gap: 0.6rem;
  min-height: 48px;
  text-wrap: balance;
}
.btn--primary svg {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}
.btn--primary.btn--outline {
  --btn-background: var(--ubd-btn-2-bg);
  --btn-background-hover: var(--ubd-btn-2-bg-hover);
  --btn-text-color: var(--ubd-btn-2-text);
  --btn-text-color-hover: var(--ubd-btn-2-text-hover);
  --btn-border-width: 1px;
  --btn-border-color: var(--ubd-btn-2-border);
  --btn-border-color-hover: var(--ubd-btn-2-border-hover);
  --focus-color: var(--ubd-text-strong);
}
/* Quiet links: ACSS's link color is currentColor and its hover is text-strong (acss.css). Keyboard focus.
   Buttons keep ACSS's button focus ring (text-strong, square corners). */
a:where(:not([class*="btn--"])):focus-visible {
  outline: 2px solid var(--ubd-focus);
  outline-offset: 3px;
}
/* Rounds the ring on links without corners of their own; any component radius wins (zero specificity). */
:where(a:not([class*="btn--"]):focus-visible) {
  border-radius: 1px;
}
/* ── Skip link ───────────────────────────────────────────────────────────────────────────────────────── */
.skip-link {
  --btn-background: var(--ubd-bg-inverse);
  --btn-background-hover: var(--ubd-bg-inverse);
  --btn-text-color: var(--ubd-text-inverse);
  --btn-text-color-hover: var(--ubd-text-inverse);
  --btn-border-color: transparent;
  --focus-color: var(--ubd-focus);
  --focus-offset: 2px;
  /* Concept A pins it to the viewport, 8px from the top, without a border, radius or slide. ACSS sets
     position: absolute !important in a layer, which beats any unlayered rule, important or not: the fixed
     position is in @layer ubd-reset below, where an important declaration outranks ACSS's. */
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 8px);
  transform: translateY(-200%);
  min-height: 2.75rem;
  height: auto;
  padding: 0 1rem;
  border-width: 0;
  border-radius: 0;
  /* Bricks ships its own .skip-link, clipped to 1px until focused. */
  clip: auto;
  overflow: visible;
  transition: none;
  font: 600 1rem / 1.5 var(--ubd-font-text);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
.skip-link:focus-visible {
  outline-offset: 2px;
  border-radius: 0;
  /* ACSS slides it in with .skip-link:focus-visible, in a layer: the transform above would win without this. */
  transform: translateY(0);
}
@layer ubd-reset {
  .skip-link {
    position: fixed !important;
  }
}
/* ── Hero ────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dial-sweep {
    from {
      transform: rotate(-118deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
}
/* ── Popups ──────────────────────────────────────────────────────────────────────────────────────────── */
.scheduler__iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
}
/* An open popup or drawer holds the page still behind it. */
html:has(dialog[open]) {
  overflow: hidden;
}
/* ── Switching modes ─────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme-switching],
  html[data-theme-switching] *,
  html[data-theme-switching] *::before,
  html[data-theme-switching] *::after {
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      color 220ms ease,
      fill 220ms ease,
      stroke 220ms ease,
      box-shadow 220ms ease !important;
  }
}
/* ── Bricks ─────────────────────────────────────────────────────────────────────────────────────────────
   What the Bricks build adds to the reference (builds/bricks/NOTES.md, "What Bricks forces"). */
/* Bricks wraps the header and footer templates in <header id="brx-header"> and <footer id="brx-footer">. Without a
   box of their own, their children lay out as the body's, as in the reference (the sticky header included). */
#brx-header,
#brx-footer {
  display: contents;
}
/* With Bricks active, ACSS's Auto Content Gap gives every Bricks Div the content gap
   (:where(:where(.brxe-div)), in a layer); the reference has it only on a section and its direct children. Zero
   specificity, so every class rule still wins. */
:where(.brxe-div:not(section:not(section section), section:not(section section) > :is(div, ul, ol))) {
  gap: normal;
}
/* Bricks' base CSS gives every element max-width: 100% ([class*=brxe-], layer bricks), which narrows the absolutely
   positioned dropdown panels to their nav item. Restated in the same layer after it, so it undoes only Bricks' rule
   and loses to every rule of the reference's own. */
@layer bricks {
  [class*='brxe-'] {
    max-width: none;
  }
}