/* Better Rate Mortgage — phone typography corrections.
 *
 * The homepage H1 rendered at 54px/65px on a 375px screen: 259px tall, 32% of
 * the viewport, pushing the value proposition and both CTAs below two scrolls.
 *
 * Scoped to Kadence advanced-heading blocks ONLY. A blanket h1 rule would also
 * hit the headings inside our own calculators and guides, which are already
 * sized for small screens and would get bigger, not smaller.
 *
 * !important is needed because Kadence emits per-block CSS with a generated
 * class of equal specificity that loads after this file.
 */
@media (max-width: 600px) {
  h1.wp-block-kadence-advancedheading {
    font-size: clamp(30px, 8.4vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.015em !important;
  }
  h2.wp-block-kadence-advancedheading {
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.2 !important;
  }
}


/* ---------------------------------------------------------- homepage hero --
 * On a phone the hero stacks graphic-then-text, so the first full screen is a
 * photo collage before the visitor learns what the company is.
 *
 * CONSTRAIN THE IMAGE, NEVER THE COLUMN. An earlier version of this file put
 * max-height + overflow:hidden on a hero column to shrink the graphic. Two
 * things were wrong with that: the class belonged to the TEXT column, not the
 * graphic one, and clipping a column silently amputates whatever happens to sit
 * lowest inside it — which was both hero CTAs. They vanished on phones and the
 * cause was invisible in the block editor, because the markup was fine.
 *
 * A column is a container for editable content; its height is the editor's to
 * decide. Sizing the one element we actually mean to size cannot swallow a
 * block someone adds later.
 */
@media (max-width: 767px) {
  /* The graphic is a square-ratio Kadence image. Capping its WIDTH scales it
     proportionally — capping height would crop heads out of the photo. */
  .kb-row-layout-id6_03057e-6b .kb-image6_70d397-c4 {
    max-width: 240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Two versions of the opening paragraph: the full one for desktop, a tighter
     one for phones. Swapped by CSS so the desktop copy is untouched. */
  .brm-hero-short { display: block; }
  .brm-hero-long  { display: none !important; }
}
@media (min-width: 768px) {
  .brm-hero-short { display: none !important; }
}


/* ------------------------------------------------------------- H1 eyebrow --
 * The homepage title tag targets "St. Louis mortgage broker", but that phrase
 * appeared nowhere in the visible page — not the H1, not an H2, not one line of
 * body copy. Only in metadata. This puts it in the H1 without disturbing the
 * headline Sean chose: it renders as a small caps line ABOVE the big type, but
 * lives inside the <h1> element, so it counts.
 *
 * NOT a ::before content string — CSS-generated text is not dependable as
 * indexed content, which would make this decorative rather than useful.
 *
 * Site-wide rule (not in a media query) despite this file's name; it sits here
 * because the rest of the homepage hero styling does.
 */
.brm-eyebrow {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3572c9;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .brm-eyebrow { font-size: 11.5px; letter-spacing: 0.12em; margin-bottom: 10px; }
}