/**
 * @file map-brand.css
 * @purpose Position the supplied FERQ logo and black stencil MAPS wordmark beside the search area.
 * @dependencies Sidebar width state, map search geometry, and the unchanged user-supplied PNG.
 * @public .map-brand, .map-brand-logo, .map-brand-wordmark.
 * @sideEffects Moves branding with sidebar expansion and reserves search space on narrow screens.
 */

/* The brand follows the same width variable and timing as the overlay sidebar. */
.map-shell { --map-brand-width: 9.35rem; --map-brand-gap: 1rem; }
.map-brand {
  position: absolute;
  z-index: 9;
  top: 1rem;
  left: calc(var(--sidebar-current-width) + var(--map-brand-gap));
  display: flex;
  align-items: center;
  gap: .6rem;
  width: var(--map-brand-width);
  height: 3.465rem;
  pointer-events: none;
  transition: left 220ms cubic-bezier(.2, 0, 0, 1);
}

/* Preserve the established logo box and its responsive dimensions. */
.map-brand-logo { position: relative; display: block; flex: 0 0 3.3rem; width: 3.3rem; aspect-ratio: 1037 / 982; overflow: hidden; }
/* Fit FERQ2 artwork bounds (111,123)-(1145,1130) inside the established
 * logo box without stretching the image or changing responsive dimensions. */
.map-brand-logo img { position: absolute; width: 117.923619%; max-width: none; height: auto; left: -9.055844%; top: -12.214499%; }
.map-brand-wordmark { color: #000; font-size: 1.705rem; letter-spacing: .06em; line-height: 1; }

/* Narrow cutouts pass the map through the glyphs, retaining the existing font and spacing.
 * Cuts sit inside each letter rather than adding tracking between letters. */
.map-brand-wordmark > span {
  display: inline-block;
  mask-image: linear-gradient(to right, #000 46%, transparent 46%, transparent 51%, #000 51%);
}
.map-brand-wordmark > span:nth-child(3) {
  mask-image: linear-gradient(to right, #000 34%, transparent 34%, transparent 39%, #000 39%);
}
.map-brand-wordmark > span:nth-child(4) {
  mask-image: linear-gradient(to bottom, #000 48%, transparent 48%, transparent 53%, #000 53%);
}

/* Preserve centered desktop search whenever there is room for the logo and loader. */
.map-shell .map-search {
  --brand-safe-search-left: max(calc((100% + var(--sidebar-collapsed-width)) / 2 - 16rem), calc(var(--sidebar-current-width) + var(--map-brand-width) + 2 * var(--map-brand-gap)));
  left: var(--brand-safe-search-left);
  width: min(32rem, calc(100% - var(--brand-safe-search-left) - 5rem));
  transform: none;
  transition: left 220ms cubic-bezier(.2, 0, 0, 1), width 220ms cubic-bezier(.2, 0, 0, 1);
}

/* Compact branding leaves a usable search field beside it on phones. */
@media (max-width: 44rem) {
  .map-shell { --map-brand-width: 5.5rem; --map-brand-gap: .65rem; }
  .map-brand { gap: .3rem; }
  .map-brand-logo { flex-basis: 2.0625rem; width: 2.0625rem; }
  .map-brand-wordmark { font-size: 1.045rem; letter-spacing: .025em; }
  .map-shell .map-search { width: calc(100% - var(--brand-safe-search-left) - .65rem); }
}

@media (prefers-reduced-motion: reduce) {
  .map-brand, .map-shell .map-search { transition: none; }
}