/* ==========================================================================
   BBM wordmark unification
   --------------------------------------------------------------------------
   One typographic treatment for the business name wherever it appears as a
   lockup: the app-bar brand and the oversized footer wordmark.

   Before this layer the header split the name into two treatments — "Brisbane
   Best" at 16–17 px/800 and "Movers" as a 8.5–10 px uppercase, letter-spaced
   subline — while the footer used the display face. This sheet gives all three
   words one family, weight, tracking, casing and colour, and lets the lockup
   stack only when the available column is genuinely too narrow for one line.

   Load it after the shared layout sheets. It is intentionally standalone and
   only touches .brand__text and .site-footer__wordmark; it does not move the
   truck mark, the header grid, the navigation, the phone pill or the footer
   columns. No fonts are downloaded: the family is a local Windows/UI stack.

   Type choice: the shared --font-display token starts with "Segoe UI Variable
   Display", the large-optical-size cut. At 17 px that cut renders tighter and
   heavier than it should, which is what made the app-bar name look cramped and
   over-bold next to the nav. The wordmark therefore asks for the text-optical
   cut ("Segoe UI Variable Text") first and only then the static "Segoe UI"
   family, with a semibold 600 weight and a hair of positive tracking (.01em,
   0.17 px at 17 px). No negative letter-spacing: the strokes keep their natural
   sidebearings, so letters never collide at fractional-DPI sizes.
   ========================================================================== */

:root {
  --bbm-wordmark-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bbm-wordmark-weight: 600;
  --bbm-wordmark-tracking: .01em;
  /* Natural word space for this stack at the lockup sizes; used only for the
     markup gap between "Best" and "Movers", which has no literal space. */
  --bbm-wordmark-word-gap: .28em;
}

/* ---------- App-bar brand ------------------------------------------------ */
/* One text box, one set of metrics. The span is reset with `font: inherit`
   rather than patched property-by-property so no legacy subline rule can leak
   through (font-size, weight, style, variant, line-height, family). */
.app-bar .brand .brand__text {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-family: var(--bbm-wordmark-family);
  font-size: 17px;
  font-weight: var(--bbm-wordmark-weight);
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1;
  letter-spacing: var(--bbm-wordmark-tracking);
  word-spacing: normal;
  text-transform: none;
  color: var(--x2-blue-900, #123a5a);
  white-space: normal;
  overflow-wrap: normal;
  transition: color .2s ease;
}

.app-bar .brand .brand__text > span {
  display: block;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.app-bar .brand:hover .brand__text,
.app-bar .brand:focus-visible .brand__text {
  color: var(--x2-blue-950, #0c2238);
}

/* Phones: two lines ("Brisbane Best" / "Movers") at a readable 13 px. The
   84 px text box is the smallest width that keeps the first line on one line
   at this size; it leaves the 48 px call and 48 px menu buttons untouched and
   still clears them at 320 px. */
@media (max-width: 520px) {
  .app-bar .brand .brand__text {
    min-width: 84px;
    font-size: 13px;
    line-height: 1.04;
  }
}

@media (min-width: 521px) and (max-width: 760px) {
  .app-bar .brand .brand__text {
    font-size: 14.5px;
    line-height: 1.04;
  }
}

/* Tablet and small laptop keep the stacked lockup: the four nav labels, call
   pill and quote button leave roughly 90 px for the name up to 1024 px. */
@media (min-width: 761px) and (max-width: 1099px) {
  .app-bar .brand .brand__text {
    font-size: 14px;
    line-height: 1.04;
  }
}

/* From 1100 px the header can hold the full name on one baseline without
   crowding the nav. The margin replaces the literal space that the split
   markup omits, so "Best" and "Movers" read as separate words without changing
   text content or the aria-label. Its width is the measured natural word space
   of the Segoe UI text cut, not a tightened guess, so the three words sit on an
   even rhythm. */
@media (min-width: 1100px) {
  .app-bar .brand .brand__text {
    min-width: 0;
    font-size: 17px;
    line-height: 1;
  }

  .app-bar .brand .brand__text > span {
    display: inline;
    margin-inline-start: var(--bbm-wordmark-word-gap);
  }
}

/* ---------- Footer wordmark --------------------------------------------- */
/* A display-scale lockup, not body copy. The existing <br> separates the
   locality from the service name; the 48 px floor is small enough that "Best
   Movers" stays on its own line at 320 px instead of collapsing to three
   lines, and the 15vw ramp reaches the previous 188 px ceiling at desktop. */
.site-footer .site-footer__wordmark {
  font-family: var(--bbm-wordmark-family);
  font-size: clamp(48px, 15vw, 188px);
  font-weight: var(--bbm-wordmark-weight);
  font-style: normal;
  line-height: .82;
  letter-spacing: var(--bbm-wordmark-tracking);
  text-transform: none;
}

/* Keep the wordmark from creating sideways scroll if a future font fallback
   measures wider than Segoe UI. The text itself still wraps at the <br>. */
.site-footer .site-footer__wordmark {
  overflow-wrap: normal;
  word-break: normal;
}

@media (forced-colors: active) {
  .app-bar .brand .brand__text,
  .app-bar .brand .brand__text > span {
    color: LinkText;
  }
}