/* Theme-aware IsoTran branding */

/*
 * Use one CSS-selected logo image rather than painting the dark and light
 * <img> elements on top of each other. This prevents translucent glow and
 * antialiasing pixels from combining into a doubled-looking wordmark.
 */
@media screen {
  .theme-logo {
    background-image: url("/assets/img/isotran-logo-dark.webp?v=20260827-2");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  :root[data-theme="light"] .theme-logo {
    background-image: url("/assets/img/isotran-logo-light.webp?v=20260827-2");
  }
  .theme-logo__image {
    display: none !important;
  }
  .brand-logo,
  .brand:hover .brand-logo {
    filter: none;
  }
}

/* Retire the older brand-mark background implementation still present in pages-7.css. */
.brand-mark,
:root[data-theme="light"] .brand-mark {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  background-image: none;
  filter: none;
}
.brand-mark--footer {
  width: auto;
  height: auto;
}

.product-window-logo {
  width: 46px;
  height: 34px;
  filter: drop-shadow(0 6px 12px rgba(22, 136, 255, .22));
}
.product-window__brand > span:last-child {
  white-space: nowrap;
}
.diagram-logo {
  width: 112px;
  height: 82px;
  filter: drop-shadow(0 10px 20px rgba(22, 136, 255, .2));
}
.deployment-core .diagram-logo {
  width: 104px;
  height: 77px;
  margin-bottom: -8px;
}
.platform-orbit__core .diagram-logo {
  width: 118px;
  height: 87px;
}
.origin-map__core .diagram-logo {
  width: 112px;
  height: 83px;
}
.deployment-boundary__app .diagram-logo {
  width: 112px;
  height: 83px;
  margin-bottom: -8px;
}
/* The full logo assets contain visual weight above their geometric center. */
.deployment-core .diagram-logo,
.deployment-boundary__app .diagram-logo {
  transform: translateY(24%);
}
.about-manifesto > .about-manifesto__brand {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 15px;
}
.about-manifesto-logo {
  width: 132px;
  height: 97px;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 22px rgba(22, 136, 255, .2));
}
.about-manifesto__brand small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}
.not-found-logo {
  width: clamp(104px, 14vw, 168px);
  height: clamp(78px, 10.5vw, 125px);
  filter: drop-shadow(0 20px 35px rgba(22, 136, 255, .25));
}

@media (max-width: 680px) {
  .product-window-logo { width: 40px; height: 30px; }
  .diagram-logo { width: 98px; height: 73px; }
  .about-manifesto > .about-manifesto__brand { align-items: flex-start; flex-direction: column; gap: 4px; }
  .about-manifesto-logo { width: 118px; height: 87px; }
}

/*
 * Reflow the deployment architecture on phones instead of scaling and
 * negatively offsetting the desktop canvas. The larger central node and
 * purpose-positioned connectors keep every relationship visually connected.
 */
@media (max-width: 520px) {
  .deployment-hero-visual {
    width: 100%;
    min-height: 555px;
    margin: 0;
    transform: none;
  }
  .deployment-boundary {
    inset: 0 0 112px;
    border-radius: 24px;
  }
  .deployment-boundary > span {
    top: 16px;
    left: 16px;
    font-size: .51rem;
  }
  .deployment-boundary__users,
  .deployment-boundary__data {
    min-width: 0;
    gap: 7px;
    padding: 10px;
    font-size: .58rem;
    white-space: nowrap;
  }
  .deployment-boundary__users {
    top: 72px;
    left: max(14px, calc(50% - 167px));
    width: 122px;
  }
  .deployment-boundary__data {
    right: max(14px, calc(50% - 167px));
    bottom: 34px;
    width: 150px;
  }
  .deployment-boundary__app {
    top: 50%;
    width: 168px;
    height: 168px;
  }
  .deployment-boundary__app .diagram-logo {
    width: 118px;
    height: 87px;
    margin-bottom: -8px;
    transform: translateY(20%);
  }
  .deployment-boundary__app small {
    font-size: .5rem;
  }
  .deployment-boundary__line--one {
    top: 114px;
    right: auto;
    bottom: auto;
    left: calc(50% - 45px);
    width: 33px;
    transform: rotate(67deg);
    transform-origin: left center;
  }
  .deployment-boundary__line--two {
    top: calc(50% + 84px);
    right: auto;
    bottom: auto;
    left: calc(50% + 10px);
    width: 61px;
    transform: rotate(83deg);
    transform-origin: left center;
  }
  .deployment-endpoints {
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  .deployment-endpoints span {
    min-width: 0;
    min-height: 92px;
    padding: 9px 5px;
    font-size: .52rem;
  }
  .deployment-exchange {
    right: 50%;
    bottom: 91px;
    left: auto;
    height: 44px;
  }
}

@media print {
  .theme-logo {
    background-image: none !important;
  }
  .theme-logo__image--dark { display: none !important; }
  .theme-logo__image--light { display: block !important; }
}