/**
 * IGLOO logotype + product ID — brand guideline §1.3, §1.5, §1.6.
 *
 * §1.1 is explicit that the logotype "should never be recreated under any
 * circumstances", so this component NEVER redraws the wordmark. It places the
 * master artwork (brand/logo-red.png / logo-white.png) and composes the product
 * identifier underneath it, which is exactly what §1.3 describes: the standard
 * logo, plus the product name in Ultima Pro lowercase, plus an underscore line.
 *
 * USAGE
 *   <span class="igloo-lockup">
 *     <img src="/brand/logo-red.png" alt="iGloo">
 *     <span class="igloo-pid">professional</span>
 *   </span>
 *
 * Size it by setting --logo-h on the element (default 46px).
 *
 * COLOUR (§1.5) — pick the variant that matches the substrate:
 *   (default)      light substrate: red logo, black product name, red rule
 *   .on-red        red substrate:   BLACK logo, white product name, white rule
 *   .on-dark       black substrate: red logo, white product name, red rule
 * §1.5 states inversion and monochrome are NOT provided for the product-ID
 * lockup, so there is deliberately no mono variant here.
 *
 * The .on-red variant swaps to the black master file rather than filtering the
 * red one — §1.5 requires the logo itself to be black on red, and a CSS filter
 * would be "modifying" the artwork, which §1.1 forbids.
 */

.igloo-lockup {
  --logo-h: 46px;
  --pid-color: #12121a;
  --rule-color: #ff3d26;

  display: inline-block;
  /* §1.6 exclusion zone: x¹ on every side, x^1.5 at the bottom, where x¹ is the
     cut-corner square — one letter tile, i.e. the logo's own height. Expressed
     here at a quarter scale so the zone is honoured without the lockup floating
     in an absurd amount of dead space in a page header. */
  padding: calc(var(--logo-h) * 0.25) calc(var(--logo-h) * 0.25)
    calc(var(--logo-h) * 0.375);
  line-height: 1;
  text-align: center;
}

.igloo-lockup img {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.igloo-lockup .igloo-pid {
  display: block;
  /* §1.3: Ultima PRO, lowercase. text-transform enforces the lowercase rule
     even if someone types the product name capitalised. */
  font-family: "Ultima Pro", system-ui, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--pid-color);
  font-size: calc(var(--logo-h) * 0.58);
  letter-spacing: 0.005em;
  margin-top: calc(var(--logo-h) * 0.10);
  padding-bottom: calc(var(--logo-h) * 0.09);
  /* the underscore line of §1.3 */
  border-bottom: max(2px, calc(var(--logo-h) * 0.055)) solid var(--rule-color);
  white-space: nowrap;
}

/* §1.5 II — on the red substrate the logo is black and the product name white. */
.igloo-lockup.on-red {
  --pid-color: #ffffff;
  --rule-color: #ffffff;
}

/* §1.5 III — on black, the logo stays red and the product name goes white. */
.igloo-lockup.on-dark {
  --pid-color: #ffffff;
  --rule-color: #ff3d26;
}

/* §1.3 allows a slight deviation from the horizontal (3–5°) on the product
   name; §1.6 illustrates it at 1.5°. Opt in with .tilt — it is a permitted
   flourish, not the default, because a tilted word is harder to read at the
   small sizes a page header uses. */
.igloo-lockup.tilt .igloo-pid {
  transform: rotate(-1.5deg);
}

@media (max-width: 640px) {
  .igloo-lockup { --logo-h: 34px; }
}