/* Wind Warrior official brand lockup - 2026-08-10
   Uses the supplied W mark and supplied WIND WARRIOR wordmark artwork. */
.ww-brand-mark-wrap,
.ww-brand-wordmark-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
  line-height: 1;
}

.ww-brand-mark-wrap {
  width: auto;
  min-width: calc(var(--ww-mark-size, 62px) + 12px);
  align-items: flex-start;
  gap: 2px;
  overflow: visible !important;
}
.ww-brand-mark {
  display: block !important;
  width: var(--ww-mark-size, 62px) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 var(--ww-mark-size, 62px);
  object-fit: contain;
}

.ww-brand-wordmark-wrap { width: var(--ww-wordmark-size, 205px); max-width: 100%; }
.ww-brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
}

.ww-trademark,
.ww-registered {
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--ww-symbol-color, #071b31);
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

/* TM is kept in normal flex flow so sticky/mobile headers cannot clip it. */
.ww-trademark {
  position: static;
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 10px;
  transform: translateY(-1px);
}

/* Registered symbol remains attached to the upper-right of the wordmark. */
.ww-registered {
  position: absolute;
  top: -0.42em;
  right: -0.72em;
  font-size: 10px;
}

/* 2026-09-04 positioning-only lockup normalization.
   The Home page is the reference: TM immediately to the right of the W mark,
   and the registered symbol at the upper-right of the WIND WARRIOR name.
   Higher-specificity page rules such as .brand span / .vendor-brand span must
   not convert these two positioning wrappers into grid elements. */
.brand-block .ww-brand-mark-wrap,
.brand .ww-brand-mark-wrap,
.vendor-brand .ww-brand-mark-wrap,
.checkout-brand .ww-brand-mark-wrap,
.brand-block .ww-brand-wordmark-wrap,
.brand .ww-brand-wordmark-wrap,
.vendor-brand .ww-brand-wordmark-wrap,
.checkout-brand .ww-brand-wordmark-wrap {
  position: relative;
  display: inline-flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.brand-block .ww-brand-mark-wrap,
.brand .ww-brand-mark-wrap,
.vendor-brand .ww-brand-mark-wrap,
.checkout-brand .ww-brand-mark-wrap {
  gap: 2px !important;
}

.brand-block .ww-trademark,
.brand .ww-trademark,
.vendor-brand .ww-trademark,
.checkout-brand .ww-trademark {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: translateY(-1px) !important;
}

.brand-block .ww-registered,
.brand .ww-registered,
.vendor-brand .ww-registered,
.checkout-brand .ww-registered {
  position: absolute !important;
  top: -0.42em !important;
  right: -0.72em !important;
  margin: 0 !important;
}

.ww-brand-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ww-brand-copy .brand-tagline,
.ww-brand-copy small { margin-top: 7px; }

/* Sizing by existing website location. */
.brand-block { --ww-mark-size: 62px; --ww-wordmark-size: 205px; }
.brand { --ww-mark-size: 56px; --ww-wordmark-size: 190px; }
.vendor-brand { --ww-mark-size: 54px; --ww-wordmark-size: 180px; }
.checkout-brand { --ww-mark-size: 46px; --ww-wordmark-size: 160px; }

/* Override generic legacy image rules in each page. */
.brand .ww-brand-mark,
.brand .ww-brand-wordmark,
.vendor-brand .ww-brand-mark,
.vendor-brand .ww-brand-wordmark,
.checkout-brand .ww-brand-mark,
.checkout-brand .ww-brand-wordmark,
.footer-lockup .ww-brand-mark,
.footer-lockup .ww-brand-wordmark,
.footer-brand .ww-brand-wordmark { height: auto !important; object-fit: contain !important; }

/* Footer presentation keeps the exact wordmark shape visible on dark navy. */
.ww-light { --ww-symbol-color: #ffffff; }
.ww-light .ww-brand-mark,
.ww-light .ww-brand-wordmark { filter: brightness(0) invert(1); }

/* Existing dark brand surfaces. */
.vendor-header .ww-brand-mark,
.vendor-header .ww-brand-wordmark,
.form-card-heading .ww-brand-wordmark { filter: brightness(0) invert(1); }
.vendor-header .ww-trademark,
.vendor-header .ww-registered,
.form-card-heading .ww-registered { color: #ffffff; }

.ww-footer-lockup {
  --ww-mark-size: 48px;
  --ww-wordmark-size: 178px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
}
.ww-footer-wordmark-only {
  --ww-wordmark-size: 188px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Inline legal/copyright brand treatment. */
.ww-copyright-brand {
  --ww-wordmark-size: 112px;
  display: inline-flex;
  align-items: center;
  gap: .42em;
  margin: 0 .18em;
  vertical-align: middle;
  white-space: nowrap;
}
.ww-copyright-brand .ww-brand-wordmark-wrap { width: var(--ww-wordmark-size); }
.ww-copyright-brand .ww-registered { top: -0.5em; right: -0.66em; font-size: 6px; }
.ww-copyright-suffix { font-size: .86em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Contact form branded label. */
.ww-form-wordmark {
  --ww-wordmark-size: 150px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 900px) {
  .brand-block { --ww-mark-size: 50px; --ww-wordmark-size: 170px; }
  .brand { --ww-mark-size: 44px; --ww-wordmark-size: 154px; }
  .vendor-brand { --ww-mark-size: 46px; --ww-wordmark-size: 150px; }
}

@media (max-width: 650px) {
  .brand-block { --ww-mark-size: 40px; --ww-wordmark-size: 137px; }
  .brand { --ww-mark-size: 38px; --ww-wordmark-size: 128px; }
  .vendor-brand { --ww-mark-size: 40px; --ww-wordmark-size: 128px; }
  .checkout-brand { --ww-mark-size: 38px; --ww-wordmark-size: 128px; }
  .ww-trademark, .ww-registered { font-size: 8px; }
  .ww-footer-lockup { --ww-mark-size: 42px; --ww-wordmark-size: 154px; }
  .ww-footer-wordmark-only { --ww-wordmark-size: 160px; }
  .ww-copyright-brand { --ww-wordmark-size: 96px; }
  .ww-form-wordmark { --ww-wordmark-size: 132px; }
}

@media (max-width: 420px) {
  .brand-block { --ww-mark-size: 36px; --ww-wordmark-size: 122px; }
  .brand { --ww-mark-size: 34px; --ww-wordmark-size: 114px; }
  .vendor-brand { --ww-mark-size: 36px; --ww-wordmark-size: 116px; }
  .ww-brand-copy .brand-tagline,
  .ww-brand-copy small { margin-top: 5px; }
}

/* 2026-08-10 TM visibility correction */
.brand-block,
.brand,
.vendor-brand,
.checkout-brand,
.ww-footer-lockup {
  overflow: visible !important;
}
.ww-brand-mark-wrap .ww-trademark {
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ww-symbol-color, #071b31) !important;
}
.ww-light .ww-brand-mark-wrap .ww-trademark,
.vendor-header .ww-brand-mark-wrap .ww-trademark {
  color: #ffffff !important;
}


/* 2026-08-10 Home floating-header visibility correction.
   The supplied artwork is black, so invert it only on explicitly dark headers. */
.ww-header-dark .ww-brand-mark,
.ww-header-dark .ww-brand-wordmark {
  filter: brightness(0) invert(1) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ww-header-dark .ww-trademark,
.ww-header-dark .ww-registered {
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ww-header-dark .ww-brand-mark-wrap,
.ww-header-dark .ww-brand-wordmark-wrap,
.ww-header-dark .ww-brand-copy {
  visibility: visible !important;
  opacity: 1 !important;
}
