/* Brand lockup - the logo + tagline treatment in the header band.
   =============================================================================
   Loaded from views/layout.pug, so EVERY page that extends it (173 views) gets
   the same header. It used to live in dashboard_responsive.css behind
   `#app_wrapper:has(.pf-page)`, which meant a page only got the lockup if it
   both carried that class on its Vue root AND loaded that stylesheet. Five
   pages had opted in and the rest - user edit, apps, and most of the platform
   area - still rendered the older inline logo + block h1, so the header changed
   shape as you moved around the product.

   The shape classes these rules key on
   (height_25p / height_63p) and the --pf-logo-w custom property are published by
   public/scripts/brand_lockup.js. Every layout that loads this stylesheet loads
   that script too - they must travel together, because the base rule below sets
   position:absolute and only the shape rules supply left/top.

   Geometry, measured rather than assumed: the wordmark is 152px wide and the
   tagline 160px at 10px/.06em, so the two stack flush. The band is 65px and the
   lockup 25 + 3 + 12 = 40, centred at 12.

   Shape matters. The fitter renders a mark of ratio <= 2.5 at 63px tall
   (height_63p) to fill the band, and 63 + 3 + 12 = 78 does not fit - so a
   square or tall logo keeps its tagline BESIDE it, offset by the logo's own
   measured width. Only the wide wordmark (height_25p) stacks.

   Absolutely positioned because the logo image in that anchor is itself
   absolute: the h1 would otherwise flow from x=0, straight over the logo, and
   sit above the band's centre line. */

@media (min-width: 1024px) {
  /* Every rule here needs :has() - the shape classes are on the logo <img>, but
     the element being positioned is its sibling .brand-text. Without the guard,
     a browser lacking :has() (Firefox < 121 / ESR 115, Safari < 15.4) still
     applies the base rule, so .brand-text goes position:absolute with NO
     left/top and lands on top of the wordmark. Before this stylesheet went
     global that affected 5 pages; now it would be ~178. Unsupported browsers
     fall back to the theme header, which is what they saw before. */
  @supports selector(:has(a)) {
    #app_wrapper #logo_wrapper .brand-text {
      display: block !important;
      position: absolute;
      min-width: 0 !important;
      margin: 0 !important;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      line-height: 1.2;
      /* The header is WHITE here - a white-alpha rule or a light ink is invisible.
         !important because the theme sets this h1's colour with its own. */
      color: #4A6670 !important;
    }
  
    /* Wide wordmark: tagline stacked under the logo, both flush to one left edge. */
    #app_wrapper #logo_wrapper:has(img.height_25p) .logo img { top: 12px !important; }
    #app_wrapper #logo_wrapper:has(img.height_25p) .brand-text {
      left: 13px;
      top: 40px;
      padding: 0;
      border: 0;
      font-size: 10px !important;
    }
  
    /* Square or tall mark: tagline beside it, against a divider, positioned from
       the logo's real measured width rather than a guess. */
    #app_wrapper #logo_wrapper:has(img.height_63p) .brand-text {
      left: calc(13px + var(--pf-logo-w, 63px) + 3px);
      top: 50%;
      transform: translateY(-50%);
      padding-left: 12px;
      border-left: 1px solid rgba(12, 55, 69, .20);
      font-size: 11px !important;
    }
  
  }
}