/* Scoped override: map GOV.UK heading-xl to project Headline1 sizing
   This is intentionally narrow and localised to avoid global surprises.
   If you later decide to keep this mapping, consider moving it into the
   canonical `govuk-overrides.scss` entry point and avoiding !important by
   increasing selector specificity instead.
*/
/* Large screens: map to Headline1 (48 / 55 / 900) */
@media (min-width: 731px) {
  /* increase specificity instead of using !important by repeating the class
     selector; this reliably beats single-class vendor rules while remaining
     CSS-only and easy to remove later. */
  /* scope to the not-found page wrapper for minimal impact */
  .page-not-found .govuk-heading-xl {
    font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 900; /* Black */
    font-size: 48px;
    line-height: 55px;
    margin: 0 0 0.6em;
  }
}
/* Small screens: map to Headline1 small (36 / 45 / 700) */
@media (max-width: 730px) {
  .page-not-found .govuk-heading-xl {
    font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 700; /* Bold */
    font-size: 36px;
    line-height: 45px;
    margin: 0 0 0.6em;
  }
}
/* .text-blue rules consolidated later in this file to avoid duplicates. */
/* Project overrides: ensure accordion headings and paragraph prose match
   the typography assertions used by the headless analyzer.

   - Accordion heading (govuk accordion section button)
     small viewport: 24px / 35px
     large viewport: 36px / 45px

   - Prose paragraphs inside .app-prose-scope
     all viewports: 16px / 24px

   We increase selector specificity by repeating the class names so we
   reliably override vendor rules without using !important.
*/
/* Accordion heading: small screens */
.govuk-accordion__section-button.govuk-accordion__section-button {
  font-size: 24px !important;
  line-height: 35px !important;
  font-weight: 700;
}

/* Also set the outer h2 element so computed styles on the heading itself match
   the analyzer expectation. Some pages render a styled h2 wrapper around the
   button and the analyzer measures the h2 element's computed line-height. */
@media (max-width: 730px) {
  h2.govuk-accordion__section-heading {
    font-size: 24px !important;
    line-height: 35px !important;
    font-weight: 700;
    margin-bottom: 0;
  }
}
/* Accordion heading: large screens */
@media (min-width: 731px) {
  .govuk-accordion__section-button.govuk-accordion__section-button {
    font-size: 36px !important;
    line-height: 45px !important;
    font-weight: 700;
  }
}
@media (min-width: 731px) {
  h2.govuk-accordion__section-heading {
    font-size: 36px !important;
    line-height: 45px !important;
    font-weight: 700;
    margin-bottom: 0;
  }
}
/* Prose paragraphs */
.app-prose-scope,
.app-prose-scope p {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Ensure .text-blue displays the intended project blue even when
   inline styles use var(--color-blue-700) and the variable is not available
   in the current cascade. This rule is intentionally specific and uses
   !important to override inline styles or later-loaded CSS that may
   otherwise set the color to black. Keep this rule near other text-blue
   overrides for discoverability. */
h1.text-blue, h2.text-blue, h3.text-blue, h4.text-blue,
h1 .text-blue, h2 .text-blue, h3 .text-blue, h4 .text-blue,
span.text-blue, .text-blue[style*="--color-blue-700"], span.text-blue[style*="--color-blue-700"] {
  color: #072c66 !important;
}