/* ==========================================================================
   Foundation headings against main.css's bare element rules
   --------------------------------------------------------------------------
   9 October 2026 demo: "Make sure the headers match the design. Header text
   seems not to keep its style when it is in mobile dimensions."

   main.css shrinks EVERY h1 and h2 on the estate below 1200px, with bare
   element selectors:

     main.css  @media (max-width: 1200px) { h1 { font-size: 26px; line-height: 30px } }
     main.css  @media (max-width: 1200px) { h2 { font-size: 17px } }

   A Foundation heading that sets its own size on a class is not touched by
   them, because a class outranks an element. A heading that does NOT is: the
   headings an editor writes in rich text ("Section header" is an h2), and the
   H1 of the legacy templates still on the Foundation tree (the home page intro,
   the Programmes landing page). At 1200px and below the Section header fell
   from 28px to 17px, which is smaller than the 26px Subsection header (h3)
   beneath it and barely larger than the 16px body copy around it.

   HOW THIS FILE IS SCOPED, AND WHY IT IS :where().
     - Loaded by masterFoundation.cshtml only, directly after main.css. Nothing
       else links it, so it cannot reach the ASISA, Academy or ESD layouts.
     - Every selector is ":where(.brand-foundation) hN". :where() adds nothing to
       specificity, so each rule weighs exactly what main.css's bare "h1" and
       "h2" weigh, and wins on load order alone. That is the whole point: it beats
       the two bare element rules above and NOTHING ELSE. Every rule with a class
       in it, shared or Foundation, still wins over this file, so no band, card,
       contact block or search result heading that styles itself can move.
     - It never names a colour, a face or a weight. The desktop style is
       main.css's and stays main.css's; this file only stops the size collapsing.
     - main.css is NOT modified.

   VALUES. No frame draws rich text, the home intro or the Programmes landing
   page at a narrow width, so every size here is an ESTIMATE, chosen to keep the
   desktop style and change the size only:
     h2  28px at every width: the desktop size, kept. Any smaller and the
         Section header drops below the Subsection header, which main.css never
         shrinks.
     h1  48px on 55px, main.css's own desktop values, down to 1025px; then the
         Foundation page H1 steps the programme tokens already carry (40px
         tablet, ESTIMATE; 34px phone, FRAME on the 5.2 and 5.3 phone frames)
         on main.css's own 1.15 ratio.
   ========================================================================== */

@media (max-width: 1200px) {
  :where(.brand-foundation) h1 {
    font-size: 48px;                            /* ESTIMATE: main.css's desktop size, kept */
    line-height: 55px;                          /* ESTIMATE: main.css's desktop leading, kept */
  }

  :where(.brand-foundation) h2 {
    font-size: 28px;                            /* ESTIMATE: main.css's desktop size, kept */
  }
}

@media (max-width: 1024px) {
  :where(.brand-foundation) h1 {
    font-size: var(--fnd-project-h1-size-tablet, 40px);   /* ESTIMATE */
    line-height: 1.15;                                   /* main.css's 55 on 48, kept as a ratio */
  }
}

@media (max-width: 767px) {
  :where(.brand-foundation) h1 {
    font-size: var(--fnd-project-h1-size-mobile, 34px);   /* the Foundation page H1 phone step */
  }
}