/* Ruang IoT Blog Footer Contrast Fix v1.4.1
   Keeps the official icon in brand blue while rendering the wordmark in white
   on the dark footer. Isolated from the main UI stylesheet to minimize regression risk. */

.brand-footer {
  gap: 11px;
}

.footer-logo-lockup {
  position: relative;
  display: inline-block;
  flex: 0 0 190px;
  width: 190px;
  height: 49px;
  overflow: hidden;
  line-height: 0;
}

.footer-logo-icon,
.footer-logo-wordmark {
  position: absolute;
  top: 0;
  height: 49px;
  background-image: url('../img/ruangiot-logo.png');
  background-repeat: no-repeat;
  background-size: 190px auto;
  background-position-y: center;
  pointer-events: none;
}

/* Preserve the official blue icon and its white network glyph. */
.footer-logo-icon {
  left: 0;
  width: 50px;
  background-position-x: 0;
}

/* Crop only the Ruang IoT wordmark, then convert that crop to white.
   The icon is a separate unfiltered layer so its internal white glyph remains intact. */
.footer-logo-wordmark {
  left: 53px;
  right: 0;
  background-position-x: -53px;
  filter: brightness(0) invert(1);
  opacity: .98;
}

.brand-footer .brand-divider {
  background: rgba(255,255,255,.20);
}

.brand-footer .brand-section {
  color: #dce7fb;
  font-weight: 780;
}

.brand-footer:focus-visible {
  outline-color: #93b4ff;
}

@media (max-width: 480px) {
  .footer-logo-lockup {
    flex-basis: 174px;
    width: 174px;
    height: 45px;
  }

  .footer-logo-icon,
  .footer-logo-wordmark {
    height: 45px;
    background-size: 174px auto;
  }

  .footer-logo-icon {
    width: 46px;
  }

  .footer-logo-wordmark {
    left: 49px;
    background-position-x: -49px;
  }
}

@media print {
  .footer-logo-wordmark {
    filter: none;
  }
}

@media (max-width: 420px) {
  .brand-footer .brand-divider {
    display: block;
    height: 22px;
  }

  .brand-footer .brand-section {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
  }
}