/* ========================================================================== 
   Tenant-Adaptive Logo Layout v1.0.0

   The shared public homepage accepts square marks, portrait marks, landscape
   logos, and full wordmarks without tenant- or industry-specific selectors.
========================================================================== */

:root {
  --tenant-logo-safe-background: #fff;
}

img[data-logo-ready="true"] {
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Header: square and portrait marks keep dynamic tenant text beside the mark.
---------------------------------------------------------------------------- */

.brand[data-logo-shape="portrait"] .brand__logo {
  width: 36px;
  height: 46px;
  flex-basis: 36px;
}

.brand[data-logo-shape="landscape"] {
  max-width: min(350px, 31vw);
}

.brand[data-logo-shape="landscape"] .brand__logo {
  width: clamp(76px, 7vw, 106px);
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
}

/* Explicit mark-with-text is available for unusually wide marks that do not
   contain the tenant name. Auto mode treats a 2.35:1+ asset as a wordmark. */

.brand[data-logo-shape="wordmark"][data-logo-presentation="mark-with-text"] {
  max-width: min(390px, 36vw);
}

.brand[data-logo-shape="wordmark"][data-logo-presentation="mark-with-text"] .brand__logo {
  width: clamp(110px, 11vw, 150px);
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
}

/* Full wordmarks receive a wide safe panel and suppress duplicate HTML text. */

:root:has(#header-brand-link[data-logo-presentation="wordmark"]) {
  --navbar-height: 80px;
}

.brand[data-logo-presentation="wordmark"] {
  width: auto;
  max-width: min(300px, 28vw);
  flex: 0 1 auto;
  gap: 0;
}

.brand[data-logo-presentation="wordmark"] .brand__logo {
  width: auto;
  max-width: 100%;
  height: clamp(58px, 4.1vw, 70px);
  max-height: none;
  flex: 0 1 auto;
  padding: 5px 7px;
  border: 1px solid rgb(15 23 42 / 8%);
  border-radius: 14px;
  background: var(--tenant-logo-safe-background);
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgb(15 23 42 / 8%);
  filter: none;
}

.brand[data-logo-presentation="wordmark"] .brand__content {
  display: none;
}

.brand[data-logo-presentation="wordmark"]:hover .brand__logo {
  border-color: rgb(15 23 42 / 12%);
  box-shadow: 0 11px 25px rgb(15 23 42 / 11%);
  transform: translateY(-1px) scale(1.01);
}

/* --------------------------------------------------------------------------
   Footer: print/full wordmarks become a readable brand panel. Other shapes
   continue using the dynamic organization name and tagline already rendered.
---------------------------------------------------------------------------- */

.site-footer__brand-link[data-logo-shape="portrait"] .site-footer__logo {
  width: 42px;
  height: 58px;
}

.site-footer__brand-link[data-logo-shape="landscape"] .site-footer__logo {
  width: clamp(86px, 9vw, 124px);
  height: 58px;
  object-fit: contain;
}

.site-footer__brand-link[data-logo-shape="wordmark"][data-logo-presentation="mark-with-text"] .site-footer__logo {
  width: clamp(120px, 13vw, 168px);
  height: 58px;
  object-fit: contain;
}

.site-footer__brand-link[data-logo-presentation="wordmark"] {
  width: max-content;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: var(--tenant-logo-safe-background);
  box-shadow: 0 16px 34px rgb(2 8 23 / 22%);
}

.site-footer__brand-link[data-logo-presentation="wordmark"] .site-footer__logo {
  width: auto;
  max-width: min(330px, 76vw);
  height: clamp(72px, 7vw, 96px);
  object-fit: contain;
}

.site-footer__brand-link[data-logo-presentation="wordmark"] > span {
  display: none;
}

/* --------------------------------------------------------------------------
   Loader: use more width for a tenant wordmark but retain compact square marks.
---------------------------------------------------------------------------- */

#page-loader-brand[data-logo-shape="square"] #loader-tenant-logo,
#page-loader-brand[data-logo-shape="portrait"] #loader-tenant-logo {
  width: auto;
  max-width: 82px;
  height: auto;
  max-height: 76px;
}

#page-loader-brand[data-logo-shape="landscape"] #loader-tenant-logo {
  width: auto;
  max-width: min(210px, 72vw);
  height: auto;
  max-height: 82px;
}

#page-loader-brand[data-logo-presentation="wordmark"] #loader-tenant-logo {
  width: auto;
  max-width: min(330px, 84vw);
  height: clamp(76px, 9vw, 102px);
  max-height: none;
  padding: 6px 9px;
  border: 1px solid rgb(15 23 42 / 8%);
  border-radius: 16px;
  background: var(--tenant-logo-safe-background);
  box-sizing: border-box;
  box-shadow: 0 14px 32px rgb(15 23 42 / 10%);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Tablet and mobile keep the full wordmark legible instead of shrinking it
   into the former 38–42px square slot.
---------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .homepage--compact .brand[data-logo-presentation="wordmark"],
  .brand[data-logo-presentation="wordmark"] {
    max-width: min(286px, calc(100vw - 98px));
  }
}

@media (max-width: 680px) {
  :root:has(#header-brand-link[data-logo-presentation="wordmark"]) {
    --navbar-height: 84px;
  }

  .homepage--compact .brand[data-logo-presentation="wordmark"],
  .brand[data-logo-presentation="wordmark"] {
    width: auto;
    max-width: calc(100vw - 88px);
  }

  .brand[data-logo-presentation="wordmark"] .brand__logo {
    width: auto;
    max-width: calc(100vw - 88px);
    height: clamp(62px, 20vw, 72px);
    padding: 4px 6px;
    border-radius: 12px;
  }

  .brand[data-logo-shape="landscape"] {
    max-width: calc(100vw - 88px);
  }

  .brand[data-logo-shape="landscape"] .brand__logo {
    width: clamp(70px, 24vw, 96px);
    height: 42px;
  }

  .site-footer__brand-link[data-logo-presentation="wordmark"] .site-footer__logo {
    max-width: min(280px, 78vw);
    height: clamp(72px, 22vw, 90px);
  }

  #page-loader-brand[data-logo-presentation="wordmark"] #loader-tenant-logo {
    max-width: min(280px, 84vw);
    height: clamp(72px, 24vw, 90px);
  }
}

@media (max-width: 380px) {
  .brand[data-logo-presentation="wordmark"] .brand__logo {
    max-width: calc(100vw - 84px);
    height: 64px;
  }

  .site-footer__brand-link[data-logo-presentation="wordmark"] .site-footer__logo,
  #page-loader-brand[data-logo-presentation="wordmark"] #loader-tenant-logo {
    max-width: 82vw;
    height: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand[data-logo-presentation="wordmark"] .brand__logo {
    transition: none;
  }
}