/* The supplied artwork is a full 3:2 lockup with generous black margins.
   These two crops keep its original symbol and lettering legible in narrow headers. */
.raid-brand-logo {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .18rem;
  flex: 0 1 auto;
  overflow: visible;
  text-decoration: none;
}

.raid-brand-logo .raid-brand-symbol,
.raid-brand-logo .raid-brand-wordmark {
  display: block !important;
  flex: 0 0 auto;
  background-image: url('../img/raid-logo.png');
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

.raid-brand-logo .raid-brand-symbol {
  width: 3.6rem;
  height: 2.65rem;
  background-size: 190% auto;
  background-position: center top;
}

.raid-brand-logo .raid-brand-wordmark {
  width: clamp(7.4rem, 31vw, 11.4rem);
  height: 1.85rem;
  background-size: 128% auto;
  background-position: center 72%;
}

.raid-brand-logo .raid-brand-custom {
  display: block;
  width: clamp(8.5rem, 34vw, 12rem) !important;
  height: 3.25rem !important;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
}

.storefront-header .raid-brand-logo,
.public-header .raid-brand-logo {
  min-height: 3.3rem;
}

.storefront-hero .raid-hero-logo {
  display: block;
  width: min(100%, 19rem);
  opacity: .82;
  mix-blend-mode: screen;
  pointer-events: none;
}

.storefront-hero .raid-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 69% at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 69% at center, #000 55%, transparent 100%);
}

.storefront-hero .raid-hero-logo--custom {
  mix-blend-mode: normal;
}

.storefront-hero .raid-hero-logo--custom img {
  max-height: 12rem;
  object-fit: contain;
}

.storefront-footer-brand .raid-footer-logo,
.public-footer .raid-footer-logo,
.plates-footer .raid-footer-logo {
  display: block;
  width: min(19rem, 78vw) !important;
  height: 9rem !important;
  max-width: 100%;
  max-height: none !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
}

.storefront-footer-brand .raid-footer-logo {
  width: min(21rem, 82vw) !important;
  height: 9.8rem !important;
}

.storefront-footer-brand .raid-footer-custom,
.public-footer .raid-footer-custom,
.plates-footer .raid-footer-custom {
  display: block;
  width: min(12rem, 58vw) !important;
  height: auto !important;
  max-height: 6rem !important;
  padding: .5rem !important;
  border-radius: .75rem;
  background: #fff;
  object-fit: contain;
}

.public-footer .raid-public-footer-brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
}

.public-footer .raid-public-footer-brand > span {
  margin-block-start: -.45rem;
}

.raid-plates-footer-brand {
  display: grid;
  justify-items: center;
  gap: .15rem;
}

.raid-plates-footer-brand p {
  margin: 0;
}

@media (max-width: 48rem) {
  .storefront-hero .raid-hero-logo {
    position: absolute;
    inset-block-start: auto;
    inset-block-end: -.8rem;
    inset-inline-end: -1.5rem;
    width: 10.5rem;
    opacity: .2;
  }

  .storefront-hero .storefront-hero-copy {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 27rem) {
  .raid-brand-logo .raid-brand-symbol {
    width: 3.15rem;
    height: 2.4rem;
  }

  .raid-brand-logo .raid-brand-wordmark {
    width: clamp(6.6rem, 30vw, 7.8rem);
    height: 1.6rem;
  }

  .plate-detail-header .raid-brand-logo .raid-brand-wordmark {
    width: 6.5rem;
  }
}

/* On phones the artwork's gold Arabic lettering is the cleaner navigation
   signature. The full emblem and bilingual lockup remain in the footer. */
@media (max-width: 48rem) {
  .storefront-header:not(.plates-index-header) .storefront-header-inner {
    justify-content: center;
  }

  .storefront-header .raid-brand-logo {
    width: min(100%, 17rem);
    min-height: 3.7rem;
    justify-content: center;
  }

  .raid-brand-logo .raid-brand-symbol {
    display: none !important;
  }

  .storefront-header .raid-brand-logo .raid-brand-wordmark {
    width: min(17rem, calc(100vw - 2rem));
    height: 3rem;
    background-size: 128% auto;
    background-position: center 70%;
  }

  .plates-index-header .storefront-header-inner {
    position: relative;
    justify-content: flex-end;
  }

  .plates-index-header .raid-brand-logo {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: min(14.6rem, calc(100vw - 5rem));
  }

  .plates-index-header .raid-brand-logo .raid-brand-wordmark {
    width: 100%;
    height: 2.8rem;
  }

  .public-header .raid-brand-logo {
    width: min(11.5rem, calc(100vw - 8.75rem));
    min-height: 3.5rem;
    justify-content: flex-start;
  }

  .public-header .raid-brand-logo .raid-brand-wordmark {
    display: block !important;
    width: 100%;
    height: 2.7rem;
    background-size: 128% auto;
    background-position: center 70%;
  }

  .storefront-body .vehicle-grid {
    gap: 1.35rem;
  }
}

.storefront-body .vehicle-card {
  border: 1px solid rgb(28 25 20 / 29%);
  box-shadow: 0 12px 28px rgb(25 21 15 / 10%), 0 2px 5px rgb(25 21 15 / 5%);
}

/* The supplied standalone emblem is sharp and transparent; using it alone in
   navigation avoids reducing the detailed bilingual lockup to illegible text. */
.raid-brand-logo .raid-brand-symbol {
  display: block !important;
  width: 7.8rem;
  height: 3.55rem;
  background-image: url('../img/raid-navbar-mark.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
}

.raid-brand-logo .raid-brand-wordmark {
  display: none !important;
}

@media (max-width: 48rem) {
  .storefront-header .raid-brand-logo {
    width: 8rem;
    min-height: 3.65rem;
  }

  .storefront-header .raid-brand-logo .raid-brand-symbol {
    display: block !important;
    width: 7.8rem;
    height: 3.55rem;
  }

  .plates-index-header .raid-brand-logo {
    width: 8rem;
  }

  .public-header .raid-brand-logo {
    width: 6.65rem;
    min-height: 3.5rem;
  }

  .public-header .raid-brand-logo .raid-brand-symbol {
    display: block !important;
    width: 6.65rem;
    height: 3.4rem;
  }

  .public-header .raid-brand-logo .raid-brand-wordmark {
    display: none !important;
  }
}