/*
  Branding utilities for crest logos (Tailwind-friendly)
  - Base: .brand-crest sets sizing and background behavior
  - Variants: .brand-crest--black, .brand-crest--white
  - Retina assets auto-swapped where available (2x)
  - Size modifiers using CSS variable or preset tokens

  Notes
  - This file intentionally avoids Tailwind @apply so it can ship standalone.
  - Combine with Tailwind utilities in markup (e.g., ml-2, align-middle).
  - Images are referenced relative to the built static root (static/img/*).
*/

:root {
  /* Default crest size if no size modifier or inline var provided */
  --brand-crest-size: 48px;
}

/* Base crest: square, centered, non-repeating graphic */
.brand-crest {
  display: inline-block;
  width: var(--brand-crest-size);
  height: var(--brand-crest-size);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* Match legacy LESS behavior that used background-size: 100% */
  background-size: 100% 100%;
  /* Help align with text baselines when used inline */
  vertical-align: middle;
}

/* Color variants map to existing raster assets */
.brand-crest--black {
  background-image: url("/static/img/CREST-black.png");
}
.brand-crest--white {
  background-image: url("/static/img/CREST-white.png");
}

/* High-DPI/retina assets */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .brand-crest--black { background-image: url("/static/img/CREST-black2x.png"); }
  .brand-crest--white { background-image: url("/static/img/CREST-white2x.png"); }
}

/* Size presets (use one or override via inline --brand-crest-size) */
.brand-crest--24 { --brand-crest-size: 24px; }
.brand-crest--32 { --brand-crest-size: 32px; }
.brand-crest--40 { --brand-crest-size: 40px; }
.brand-crest--48 { --brand-crest-size: 48px; }
.brand-crest--56 { --brand-crest-size: 56px; }
.brand-crest--64 { --brand-crest-size: 64px; }
/* Larger sizes for brand requirements */
.brand-crest--80 { --brand-crest-size: 80px; }
.brand-crest--140 { --brand-crest-size: 140px; }

/* Responsive helper: 80px on phones, 140px on larger screens */
.brand-crest--resp-80-120 { --brand-crest-size: 80px; }
@media (min-width: 640px) { /* Tailwind sm breakpoint */
  .brand-crest--resp-80-120 { --brand-crest-size: 120px; }
}

/* Optional layout helpers when pairing with text/wordmark */
.branding-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem; /* Tailwind: gap-2 */
}

/* Footer usage parity with legacy .footer-brand wrapper */
.footer-brand .brand-crest {
  /* Legacy footer crest was 100px square */
  --brand-crest-size: 100px;
}