/* =========================================================
   Clear Link v1.10.12 — mobile header flow + mobile-only heading wrap
   IMPORTANT: This file only applies through 820px. Desktop line breaks,
   widths and typography are intentionally untouched.
   ========================================================= */
@media (max-width: 820px){
  /* ---------------------------------------------------------
     Header behavior foundation
     - always anchored to the top edge on public mobile views
     - JS adds .is-mobile-hidden while scrolling down
     --------------------------------------------------------- */
  html body.has-overlay-header .site-header,
  html body.has-overlay-header .site-header.site-header--overlay,
  html body.has-overlay-header .site-header.is-scrolled{
    position:fixed!important;
    top:0!important;
    inset-block-start:0!important;
    left:0!important;
    right:0!important;
    margin:0!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .26s cubic-bezier(.22,.61,.36,1),background-color .22s ease,box-shadow .22s ease!important;
    will-change:transform;
    z-index:7000!important;
  }

  /* v1.11.36: mobile header is intentionally persistent. */
  html body.has-overlay-header .site-header.is-mobile-hidden{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  html body.menu-open.has-overlay-header .site-header,
  html body.has-overlay-header .site-header.is-mobile-visible{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  /* WordPress admin-bar is an editor-only exception: keep the public header
     directly below the actual WP toolbar so it is never buried under it. */
  html body.admin-bar.has-overlay-header .site-header,
  html body.admin-bar.has-overlay-header .site-header.is-scrolled{
    top:46px!important;
    inset-block-start:46px!important;
  }
  html body.admin-bar.has-overlay-header .site-header.is-mobile-hidden{
    transform:translate3d(0,0,0)!important;
  }

  /* ---------------------------------------------------------
     Mobile-only line breaking
     Desktop manual <br> remains in the stored HTML and keeps working on PC.
     On mobile it is visually neutralised, so the phone can wrap naturally.
     --------------------------------------------------------- */
  main :is(h1,h2,h3,h4) br{
    display:none!important;
  }

  main :is(h1,h2,h3,h4),
  .home-hero__panel :is(h1,h2,h3),
  .site-unified-hero .home-hero__panel :is(h1,h2,h3){
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
    hyphens:none!important;
    text-wrap:balance!important;
  }

  main h3,
  main h4{
    text-wrap:pretty!important;
  }

  /* Japanese phrase-aware wrapping where supported. */
  @supports (word-break: auto-phrase){
    main :is(h1,h2,h3,h4),
    .home-hero__panel :is(h1,h2,h3),
    .site-unified-hero .home-hero__panel :is(h1,h2,h3){
      word-break:auto-phrase!important;
    }
  }

  /* Legacy line spans are inline only on mobile. No desktop markup changes. */
  main :is(h1,h2,h3,h4)>span,
  main .hero-semantic-title>span,
  main .home-editorial-title>span,
  main .ft-semantic-title>span{
    display:inline!important;
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  /* Hero headings get a little more usable line length on phones, while any
     user-saved mobile width/max-width from Site Core still wins later. */
  .home-hero__panel h1,
  .site-unified-hero .home-hero__panel h1{
    width:100%!important;
    max-width:100%!important;
    text-wrap:balance!important;
  }
}

@media (min-width: 821px){
  /* Deliberately empty: PC line breaks and editor typography stay untouched. */
}