/* ============================================================================
   layout-additions.css   Mining Auger & Tool Works
   Prepared 2026-08-21. Link this file AFTER layout.css (head_script.php does).
   It exists only to preserve the existing appearance while the underlying HTML
   tags are corrected for search engines and screen readers.
   No visual change is intended by any rule in this file.

   CORRECTED 2026-08-24 after checking every rule against layout.css. Two
   defects were found and fixed; details at the bottom of this file.
   ============================================================================ */

/* header.php: the site name was an <h1>, now <p class="page-header-brandmark">.
   These are the exact ten declarations ".page-header h1" applies in layout.css. */
.page-header-brandmark {
     font-size: var(--fontsizepage-headerh1);
     font-weight: bold;
     line-height: 1;
     text-align: center;
     letter-spacing: 1.5px;
     margin: 0px;
     padding: 0px;
     color: var(--showcasetitle-color);
     text-decoration-line: none;
     text-shadow: 1px 1px 1px black, -1px -1px 1px white, 2px 2px 4px #111;
}

/* layout.css sizes ".page-header h1" at THREE breakpoints. All three are mirrored
   here, in the same order, so the cascade resolves identically:
     default          3vw     (--fontsizepage-headerh1, line 38)
     max-width 820px  24.5px  (line 4001)
     max-width 359px  5vw     (line 4132)
   Order matters: below 359px both media queries match, and the later rule wins. */
@media screen and (max-width: 820px) {
     .page-header-brandmark { font-size: 24.5px; }
}
@media screen and (max-width: 359px) {
     .page-header-brandmark { font-size: 5vw; }
}

/* ----------------------------------------------------------------------------
   WHAT WAS CORRECTED, AND WHY

   1. Three declarations were missing from .page-header-brandmark:
        color: var(--showcasetitle-color)   (= orangered)
        text-decoration-line: none
        text-shadow: 1px 1px 1px black, -1px -1px 1px white, 2px 2px 4px #111
      The new <p> sits inside .header-center, which sets color: var(--black-color).
      Without these the site name would have rendered BLACK AND FLAT instead of
      orangered and embossed, on every page of all three sites.

   2. A responsive breakpoint was missing. layout.css sizes ".page-header h1"
      at THREE widths, not two:
           default           3vw      line   38
           max-width 820px   24.5px   line 4001
           max-width 359px   5vw      line 4132
      The version shipped on 21 Aug had the 820px rule but not the 359px one,
      so it was wrong only below 359px - a narrow band.

      A first pass at this correction on 24 Aug had that backwards: it recorded
      the 820px rule as "a breakpoint that appears nowhere in layout.css" and
      deleted it, keeping only 359px. That was wrong, and worse than the
      original - it left the brandmark at 3vw across 360-820px, which is every
      common phone and tablet. On a 375px phone that renders 11.2px instead of
      24.5px, under half size.

      All three breakpoints are now present, in layout.css's own order.

   3. A block styling h1.ProdPageToolBrand / h2.ProdPageToolModel /
      h3.ProdPageToolType was REMOVED. It restated font-size, margin,
      font-weight and display, all of which .ProdPageToolBrand, .ProdPageToolModel
      and .ProdPageToolType already set in layout.css - author styles override
      browser heading defaults regardless of specificity, so none of it was
      needed. It was also harmful: "h1.ProdPageToolBrand" (specificity 0,1,1)
      outranks layout.css's "@media (max-width: 910px) .ProdPageToolBrand"
      (0,1,0), so it defeated the mobile sizes. On a 375px phone the tool page
      headings would have shrunk to roughly 8px, 7px and 6px instead of 20px,
      16px and 13.5px.

      The three classes already carry font-size, font-style, font-weight,
      text-shadow, color, margin and padding in both the default and the
      910px context. Promoting the tags to h1/h2/h3 changes nothing visually
      on its own.
   ---------------------------------------------------------------------------- */