/* Sun Road lockup. One drawing. Dark chrome uses the Paper wordmark.
   background-size: contain keeps the master aspect ratio (object-fit: contain
   for this single image). Width stays auto so the box cannot squash it. */

.ns-brand-lockup,
.sidebar-brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.ns-brand-lockup {
  display: block;
  box-sizing: border-box;
  height: 2.5rem;
  width: auto;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 345.76 / 92;
  background-image: url("/static/images/brand/sun-road-lockup-horizontal.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.logo-brand .ns-brand-lockup {
  height: 4rem;
  width: auto;
  max-width: min(100%, 260px);
}

/* Dusk chrome after sunset, and the daytime film navbar.
   On Dusk the mark ground stays Ink; only the wordmark is Paper.
   Doctor portal never sets data-ground, so it stays on the day lockup.
   Command Centre does not use .ns-brand-lockup. The Ink sidebar img is
   the on-ink lockup. Sign-in uses the day file on the Linen card.
   A Paper card (booking modal) is not in this list. */
html[data-ground="dusk"] :is(
  .sidebar,
  .patient-portal-header,
  .onboarding-header,
  footer.bg-white,
  .image-panel,
  .marketing-navbar
) .ns-brand-lockup,
.marketing-navbar--ghost .ns-brand-lockup {
  background-image: url("/static/images/brand/sun-road-lockup-horizontal-on-dark.svg");
}

/* Definite height, like the sidebar. Aspect-ratio sets the width.
   An empty span with height:auto has no intrinsic size. */
.marketing-brand-responsive .ns-brand-lockup,
.marketing-brand-responsive.ns-brand-lockup {
  height: var(--ns-brand-wordmark-height, 2.023rem);
  width: auto;
  max-width: none;
  flex-shrink: 0;
  aspect-ratio: 345.76 / 92;
}

/* Below 360px the two-line lockup would be under 24px. The mark is the
   16px minimum. These rules follow the dusk and ghost lockups so the
   mark wins, including the Ink-ground mark on Dusk and the film navbar. */
@media (max-width: 359px) {
  .marketing-brand-responsive .ns-brand-lockup,
  .marketing-brand-responsive.ns-brand-lockup {
    width: 1rem;
    height: 1rem;
    max-height: 1rem;
    aspect-ratio: 1;
    background-image: url("/static/images/brand/sun-road-mark.svg");
  }

  html[data-ground="dusk"] :is(
    .sidebar,
    .patient-portal-header,
    .onboarding-header,
    footer.bg-white,
    .image-panel,
    .marketing-navbar
  ) :is(
    .marketing-brand-responsive .ns-brand-lockup,
    .marketing-brand-responsive.ns-brand-lockup
  ),
  .marketing-navbar--ghost :is(
    .marketing-brand-responsive .ns-brand-lockup,
    .marketing-brand-responsive.ns-brand-lockup
  ) {
    background-image: url("/static/images/brand/sun-road-mark.svg");
  }
}

/* Command Centre draws the lockup as an img: on-ink in the Ink sidebar,
   day file on the Linen sign-in card. Width is the 2.5rem height times
   Joe's ratio, capped by the column. Height stays auto so a 260px
   sidebar cannot stretch the drawing when the root font grows.
   object-fit keeps the drawing if a constraint binds first. */
img.ns-ops-lockup {
  display: block;
  box-sizing: border-box;
  width: min(100%, calc(2.5rem * 345.76 / 92));
  height: auto;
  max-width: 100%;
  aspect-ratio: 345.76 / 92;
  object-fit: contain;
}

/* Mobile public header after sunset. The mark's lower half is Ink, and
   Ink on the Dusk bar does not read. The plate is Paper, the light ground,
   so the day lockup sits on it (Ink wordmark). No border: a keyline is
   forbidden. Padding is the sun's height, 12/92 of the drawing, on every
   side. 116 is 92 + 12 + 12, so the plate stays the wordmark box when that
   box is already at least 24px. Below that, the drawing holds at 1.5rem. */
@media (min-width: 360px) and (max-width: 767px) {
  html[data-ground="dusk"] .marketing-navbar:not(.marketing-navbar--ghost) :is(
    .marketing-brand-responsive .ns-brand-lockup,
    .marketing-brand-responsive.ns-brand-lockup
  ) {
    box-sizing: content-box;
    height: max(1.5rem, calc(var(--ns-brand-wordmark-height, 2.023rem) * 92 / 116));
    width: calc(max(1.5rem, calc(var(--ns-brand-wordmark-height, 2.023rem) * 92 / 116)) * 345.76 / 92);
    max-height: none;
    aspect-ratio: auto;
    padding: calc(12 / 92 * max(1.5rem, calc(var(--ns-brand-wordmark-height, 2.023rem) * 92 / 116)));
    border-width: 0;
    border-radius: var(--radius-xs, 8px);
    box-shadow: none;
    background-color: var(--color-paper, #fcf8ee);
    background-image:
      url("/static/images/brand/sun-road-lockup-horizontal.svg"),
      linear-gradient(var(--color-paper, #fcf8ee), var(--color-paper, #fcf8ee));
    background-repeat: no-repeat, no-repeat;
    background-position: left center, center;
    background-size: contain, auto;
    background-origin: content-box, border-box;
    background-clip: content-box, border-box;
  }
}

/* Below 24px the mark alone is already the rule. Same Paper plate, same
   clearspace, still the day mark. The two-line file stays off. */
@media (max-width: 359px) {
  html[data-ground="dusk"] .marketing-navbar:not(.marketing-navbar--ghost) :is(
    .marketing-brand-responsive .ns-brand-lockup,
    .marketing-brand-responsive.ns-brand-lockup
  ) {
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    max-height: none;
    aspect-ratio: 1;
    padding: calc(1rem * 12 / 92);
    border-width: 0;
    border-radius: var(--radius-xs, 8px);
    box-shadow: none;
    background-color: var(--color-paper, #fcf8ee);
    background-image:
      url("/static/images/brand/sun-road-mark.svg"),
      linear-gradient(var(--color-paper, #fcf8ee), var(--color-paper, #fcf8ee));
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: contain, auto;
    background-origin: content-box, border-box;
    background-clip: content-box, border-box;
  }
}

/* Patient sidebar on Dusk, at every width. The portal header has no
   lockup. The sidebar is Dusk on desktop too, and the mark's lower
   half is Ink, so it gets the same Paper plate as the mobile public
   header. Paper ground stays bare. 116 is 92 + 12 + 12, so the outer
   box stays the 2.5rem wordmark height. */
html[data-ground="dusk"] aside.sidebar .ns-brand-lockup {
  box-sizing: content-box;
  height: calc(2.5rem * 92 / 116);
  width: calc(2.5rem * 92 / 116 * 345.76 / 92);
  max-height: none;
  aspect-ratio: auto;
  padding: calc(2.5rem * 12 / 116);
  border-width: 0;
  border-radius: var(--radius-xs, 8px);
  box-shadow: none;
  background-color: var(--color-paper, #fcf8ee);
  background-image:
    url("/static/images/brand/sun-road-lockup-horizontal.svg"),
    linear-gradient(var(--color-paper, #fcf8ee), var(--color-paper, #fcf8ee));
  background-repeat: no-repeat, no-repeat;
  background-position: left center, center;
  background-size: contain, auto;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}