/* ==========================================================================
   a11y-forms.css — accessibility support for the public form pages
   (contact.php, index.php, topsoil.php, concrete.php, careers.php).
   Loaded AFTER b.css / wam.css / custom.css so its rules win on ties.
   Part of the 2026-08 WCAG 2.1 AA remediation. Do not inline into pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Visual-parity classes for corrected heading levels.
   Several pages used <h3>–<h6> purely for their size, which broke the
   document outline (axe: heading-order). Tags were corrected to the right
   level (or to <p> where the text is not a heading); these classes keep the
   previous rendering. Size/margin/line-height baseline is b.css (loaded
   after Bootstrap, it re-bases all headings to responsive ems: h3 1.7em,
   h4 1.25em, h5 1em, h6 0.85em, margins 0.5em, line-height 1.2em — NOT
   Bootstrap's pixel defaults), with body font-size 16px from custom.css;
   font-family/weight/letter-spacing from custom.css `h1,h2,h3,h4` rule.
   color:inherit (specificity 0-1-0) intentionally beats the custom.css
   `h1,h2 {color:#006940}` element rule so swapped tags keep inherited color.
   -------------------------------------------------------------------------- */
.a11y-h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    letter-spacing: .02em;
    font-size: 1.7em;
    line-height: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.a11y-h4 {
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    letter-spacing: .02em;
    font-size: 1.25em;
    line-height: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.a11y-h5 {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: normal;
    font-size: 1em;
    line-height: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.a11y-h6 {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: normal;
    font-size: 0.85em;
    line-height: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Only ELEMENT-scoped color reset: an <h4> promoted to <h2>/<h3> must not
   pick up custom.css `h1,h2 {color:#006940}`. Scoped to the heading tags so
   this never outranks utility color classes (.white/.green) on <p> swaps. */
h2.a11y-h3, h2.a11y-h4, h2.a11y-h5,
h3.a11y-h4, h3.a11y-h5, h3.a11y-h6 {
    color: inherit;
}

/* Bootstrap modal titles were <h4>; now <h2 class="modal-title a11y-h4">.
   .modal-title zeroed the h4 element margin before; keep that. */
.modal-title.a11y-h4 {
    margin: 0;
}

/* Panel headings that were <h4> and are now <h2>/<h3> keep the same look.
   Mirrors custom.css `.panel-success>.panel-heading h4`. */
.panel-success > .panel-heading h2,
.panel-success > .panel-heading h3 {
    color: #fff;
    font-size: 1.5em;
}

/* --------------------------------------------------------------------------
   2. Contrast corrections (axe: color-contrast, WCAG 1.4.3).
   Bootstrap's <small> inside headings is #777: 4.11:1 on the #f5f5f5 .well
   (topsoil calculator "Estimated Total Cubic Yards"), just under 4.5:1.
   #595959 is 6.42:1 on #f5f5f5 and 7.0:1 on white. Same gray, slightly
   darker; applies wherever this sheet is loaded.
   -------------------------------------------------------------------------- */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.a11y-h3 small, .a11y-h4 small, .a11y-h5 small, .a11y-h6 small {
    color: #595959;
}

/* Keep Bootstrap's heading-small rendering on the corrected tags. */
.a11y-h3 small, .a11y-h4 small, .a11y-h5 small, .a11y-h6 small {
    font-weight: normal;
    line-height: 1;
}
.a11y-h3 small {
    font-size: 65%;
}
.a11y-h4 small, .a11y-h5 small, .a11y-h6 small {
    font-size: 75%;
}