/* TapLure Connect LLC brand lockup — the one shared logo component.
 *
 * Markup (every placement):
 *   <a class="nav-logo tl-brand" href="/">
 *     <img class="tl-brand-logo" alt="TapLure Connect LLC" width="320" height="90"
 *          src="/assets/taplure-connect-logo-dark-320.webp"
 *          srcset="/assets/taplure-connect-logo-dark-320.webp 320w,
 *                  /assets/taplure-connect-logo-dark-640.webp 640w"
 *          sizes="(max-width: 360px) 92px, (max-width: 480px) 107px, 128px">
 *   </a>
 *
 * Theme selection follows the page's own surface. Every TapLure web surface is
 * dark (#060610 and the navy/near-black variants), so every placement uses the
 * *-dark-* asset (light lettering and glow). A placement on a light surface
 * uses the *-light-* asset (dark lettering), which ships alongside it; do not
 * key the choice to prefers-color-scheme, because the pages themselves never
 * switch palette.
 *
 * Assets are straight-alpha WebP, 320w and 640w (3.55:1), derived from the
 * approved 3840x2160 masters in brand/masters/ (not in the app bundle):
 * cropped to the lockup (box 240,430 - 3570,1370) and extracted from their
 * vignetted backgrounds, so they sit on any dark (or, for the light variant,
 * light) surface without a visible box.
 */

.tl-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
}

/* Retire the old CSS-drawn "T" badge wherever a page still styles it. */
.tl-brand::before,
.nav-logo.tl-brand::before {
  content: none;
  display: none;
}

.tl-brand-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: none;
}

/* Footer and standalone card placements read slightly larger. */
.tl-brand--footer .tl-brand-logo { height: 44px; }
.tl-brand--card .tl-brand-logo { height: 40px; }

/* Therapist shell sidebar. */
.tl-brand--sidebar .tl-brand-logo { height: 34px; }

.tl-brand:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 4px;
  border-radius: 6px;
}

/* The therapist sidebar becomes a horizontal rail (taplure-therapist-shell.css). */
@media (max-width: 860px) {
  .tl-brand--sidebar .tl-brand-logo { height: 30px; }
}

/* Same footprint as the retired wordmark at the auth-nav compaction steps. */
@media (max-width: 480px) {
  .tl-brand-logo { height: 30px; }
  .tl-brand--footer .tl-brand-logo { height: 38px; }
  .tl-brand--card .tl-brand-logo { height: 34px; }
}

@media (max-width: 360px) {
  .tl-brand-logo { height: 26px; }
  .tl-brand--card .tl-brand-logo { height: 30px; }
}