/*
 * Global heading scale.
 *
 * Loaded right AFTER bootstrap.css and BEFORE the theme's main.css (see
 * src/app/layout.tsx).
 *
 * 1. Base rules (no !important): replace Bootstrap's h1-h6 / .h1-.h6 defaults.
 *    margin-bottom: 0 is only a default - the theme's own spacing still wins.
 *
 * 2. Heading TAGS (h1-h6): font-size and line-height are !important, so the
 *    scale wins over every theme class (.service_title, .section_title, ...)
 *    on every heading site-wide. Colour, weight, alignment and margins still
 *    come from those classes. The theme CSS can't be edited (npm run
 *    import:october overwrites it), so the override lives here.
 *
 *    The values come from CSS variables with the scale as the default. The theme
 *    never sets them, so by default every heading gets the scale; to change ONE
 *    heading on purpose, set them on it (or use Typography's size props):
 *      --heading-size, --heading-line-height                (all widths)
 *      --heading-size-mobile, --heading-line-height-mobile  (<= 767px; fall back
 *                                                            to the two above)
 *    Custom properties inherit, so setting them on a container resizes every
 *    heading inside it.
 *
 *    Deliberately tag-only: non-heading text that only borrows a heading look
 *    (<Typography variant="h1" as="div"> counters, the travel <p className="h5">)
 *    keeps its original size, as the SEO audit asked ("same font size").
 */
h1, .h1 { font-size: 50px; line-height: 1.5em; margin-bottom: 0; }
h2, .h2 { font-size: 30px; line-height: 1.5em; margin-bottom: 0; }
h3, .h3 { font-size: 26px; line-height: 1.2em; margin-bottom: 0; }
h4, .h4 { font-size: 22px; line-height: 1.2em; margin-bottom: 0; }
h5, .h5,
h6, .h6 { font-size: 20px; line-height: 1.2em; margin-bottom: 0; }

/* A single word wider than the line (e.g. "communication" at 40px on a phone) breaks
   instead of overflowing; normal wrapping is unchanged. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1 { font-size: var(--heading-size, 50px) !important; line-height: var(--heading-line-height, 1.5em) !important; }
h2 { font-size: var(--heading-size, 30px) !important; line-height: var(--heading-line-height, 1.5em) !important; }
h3 { font-size: var(--heading-size, 26px) !important; line-height: var(--heading-line-height, 1.2em) !important; }
h4 { font-size: var(--heading-size, 22px) !important; line-height: var(--heading-line-height, 1.2em) !important; }
h5, h6 { font-size: var(--heading-size, 20px) !important; line-height: var(--heading-line-height, 1.2em) !important; }

@media (max-width: 767.98px) {
  h1, .h1 { font-size: 40px; line-height: 1.2em; }
  h2, .h2 { font-size: 26px; line-height: 1.2em; }
  h3, .h3 { font-size: 24px; line-height: 1.2em; }
  h4, .h4 { font-size: 22px; line-height: 1.2em; }
  h5, .h5,
  h6, .h6 { font-size: 20px; line-height: 1.2em; }

  h1 { font-size: var(--heading-size-mobile, var(--heading-size, 40px)) !important;
       line-height: var(--heading-line-height-mobile, var(--heading-line-height, 1.2em)) !important; }
  h2 { font-size: var(--heading-size-mobile, var(--heading-size, 26px)) !important;
       line-height: var(--heading-line-height-mobile, var(--heading-line-height, 1.2em)) !important; }
  h3 { font-size: var(--heading-size-mobile, var(--heading-size, 24px)) !important;
       line-height: var(--heading-line-height-mobile, var(--heading-line-height, 1.2em)) !important; }
  h4 { font-size: var(--heading-size-mobile, var(--heading-size, 22px)) !important;
       line-height: var(--heading-line-height-mobile, var(--heading-line-height, 1.2em)) !important; }
  h5, h6 { font-size: var(--heading-size-mobile, var(--heading-size, 20px)) !important;
           line-height: var(--heading-line-height-mobile, var(--heading-line-height, 1.2em)) !important; }
}