/* ============================================================
   sg-logo.css  — Sobhi Group brand marks
   ------------------------------------------------------------
   ONLY S/G monogram marks are used. No full wordmark anywhere.

   Header: two stacked <img> tags in .brand-mark, crossfaded by
     .topbar.is-on-dark / .topbar.is-scrolled
       · sgwhite.png   over the dark hero
       · sg-mark.svg   when scrolled or on inner pages
   Drawer (dark panel):  sgwhite.png used directly
   Footer (cream panel): sg-mark.svg used directly (native black)
   ============================================================ */

/* ============================================================
   TOPBAR — two-image crossfade
   ============================================================ */
.brand-mark {
  position: relative;
}
.brand-mark .sg-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: opacity 0.4s var(--ease, ease);
}

/* Default (no .is-on-dark, no .is-scrolled) — show BLACK mark.
   Covers inner pages whose topbar starts in neutral state. */
.brand-mark .sg-mark--white { opacity: 0; }
.brand-mark .sg-mark--black { opacity: 1; }

/* Over a dark hero (home, about, search, media, etc. at the top) */
.topbar.is-on-dark:not(.is-scrolled) .brand-mark .sg-mark--white { opacity: 1; }
.topbar.is-on-dark:not(.is-scrolled) .brand-mark .sg-mark--black { opacity: 0; }

/* Once scrolled past the hero — always BLACK */
.topbar.is-scrolled .brand-mark .sg-mark--white { opacity: 0; }
.topbar.is-scrolled .brand-mark .sg-mark--black { opacity: 1; }

/* ============================================================
   DRAWER — white S/G mark on dark panel
   ============================================================ */
.drawer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-logo .sg-drawer-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   FOOTER — black S/G mark on cream panel
   ============================================================ */
.footer-logo {
  display: flex;
  align-items: center;
}
.footer-logo .sg-footer-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}