/* =====================================================================================================================
   LUMORA brand — ONE shared stylesheet for the supplied image wordmark and portal loader, used by the public pages AND the
   Student / Instructor / Admin portals. Visual only: no layout of its host is changed.
     full wordmark: Images/logo/lumora-logo-white.png (dark contexts) or lumora-logo-color.png (light contexts)
     compact brand: Images/logo/lumora-app-icon.png
     .lm-portal-loader    first-paint loader shown while the auth guard keeps a portal page hidden (html.epc-guard-pending)
   Colours come from custom properties with fallbacks, so the file works without the public design tokens; the light theme
   (html[data-theme="light"], portal presentation layer) switches the foreground to ink.
   ===================================================================================================================== */
/* ------------------------------------------------------------------------------------------------ wordmark */
/* zero-specificity display so a host rule such as `.mobile-brand { display: none }` keeps working */
:where(.lm-brand) { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.lm-logo { display: block; flex: none; object-fit: contain; }
.lm-logo--full { width: 128px; height: 40px; }
.lm-brand__text { display: none; }
.lm-logo--compact { width: 30px; height: 30px; }
.lm-logo[data-academy-brand-logo="academy"] { content: normal !important; max-width: 150px; object-fit: contain; object-position: center; }
.brand .lm-logo[data-academy-brand-logo="academy"] { height: 44px; width: min(150px, 100%); }
.mobile-brand .lm-logo[data-academy-brand-logo="academy"] { height: 32px; max-width: 76px; width: auto; }
.lm-auth__brand .lm-logo[data-academy-brand-logo="academy"], .lm-auth__mbrand .lm-logo[data-academy-brand-logo="academy"] { height: 46px; max-width: 170px; width: auto; }
.epc-denied-brand .lm-logo[data-academy-brand-logo="academy"], .epc-status-brand .lm-logo[data-academy-brand-logo="academy"] { height: 48px; max-width: 180px; width: auto; }

/* portal light theme: ink wordmark, deeper gold for contrast on white */
html[data-theme="light"] :is(.brand, .epc-denied-brand, .epc-status-brand, .lm-auth__mbrand) .lm-logo--full { content: url("../Images/logo/lumora-logo-color.png"); }

/* Student portal logo switching is asset-based; presentation.css's legacy brightness filter must never recolor these assets. */
html[data-theme="light"] body[data-portal="student"] .brand .lm-logo--full { content: url("../Images/logo/lumora-logo-color.png"); filter: none; }
html[data-theme="dark"] body[data-portal="student"] .brand .lm-logo--full { content: url("../Images/logo/lumora-logo-white.png"); filter: none; }
html body[data-portal="student"] .mobile-brand { display: inline-flex; align-items: center; justify-content: center; flex: none; visibility: visible; opacity: 1; }
html body[data-portal="student"] .mobile-brand .lm-logo--compact { width: 32px; height: 32px; content: url("../Images/logo/lumora-app-icon.png"); filter: none; object-fit: contain; }

/* ------------------------------------------------------------------------------------------------ portal first-paint loader */
.lm-portal-loader { display: none; }
html.epc-guard-pending .lm-portal-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 26px; visibility: visible; background: radial-gradient(60% 50% at 50% 44%, rgba(242, 184, 75, .07), transparent 70%), #06121f; color: #a8b5c1; }
.lm-portal-loader__brand { display: grid; justify-items: center; gap: 9px; }
.lm-portal-loader__brand::before { width: 156px; height: 50px; background: url("../Images/logo/lumora-logo-white.png") center / contain no-repeat; content: ""; }
.lm-portal-loader__name, .lm-portal-loader__sub { display: none; }
.lm-portal-loader__line { position: relative; width: 168px; height: 1px; margin-block-start: 11px; overflow: hidden; background: linear-gradient(90deg, rgba(242, 184, 75, 0), rgba(242, 184, 75, .22), rgba(242, 184, 75, 0)); }
.lm-portal-loader__line::after { position: absolute; inset-block: 0; inset-inline-start: 0; width: 64px; background: linear-gradient(90deg, transparent, #f2b84b 50%, transparent); content: ""; animation: lm-portal-line 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.lm-portal-loader__label { font: 500 .75rem/1 "Manrope", system-ui, sans-serif; letter-spacing: .04em; }
@keyframes lm-portal-line { from { transform: translateX(-80px); } to { transform: translateX(184px); } }
[dir="rtl"] .lm-portal-loader__brand, [dir="rtl"] .lm-portal-loader__line { direction: ltr; }
html[data-theme="light"].epc-guard-pending .lm-portal-loader { background: radial-gradient(60% 50% at 50% 44%, rgba(201, 138, 31, .08), transparent 70%), #f7f4ee; color: #55627f; }
html[data-theme="light"] .lm-portal-loader__brand::before { background-image: url("../Images/logo/lumora-logo-color.png"); }
html[data-theme="light"] .lm-portal-loader__name { color: #0a1725; }
html[data-theme="light"] .lm-portal-loader__sub { color: #55627f; }
@media (prefers-reduced-motion: reduce) { .lm-portal-loader__line::after { animation: none; transform: translateX(52px); } }

/* account-status / access-denied cards: the wordmark replaces a centred logo image */
.epc-status-brand.lm-brand, .epc-denied-brand.lm-brand { display: flex; justify-content: center; margin: 0 auto 14px; }
/* the narrowest phones: keep clear space next to the header controls */
@media (max-width: 360px) {
  .lm-logo--compact { width: 26px; height: 26px; }
  html body[data-portal="student"] .mobile-brand .lm-logo--compact { width: 28px; height: 28px; }
}

/* ------------------------------------------------------------------------------------------------ Academy logos are IMAGES: their pixels are never themed.
   No filter / blend / mask / opacity / content-swap may touch an uploaded Academy logo, in any theme. If a logo needs contrast, the CONTAINER (plate) changes. */
img[data-academy-brand-logo="academy"], .lm-logo[data-academy-brand-logo="academy"] { filter: none !important; mix-blend-mode: normal !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; object-fit: contain; }
/* Dark surfaces: seat the logo on a light plate (container background only) so dark/black logos stay legible. Fallback LUMORA logos are untouched. */
html[data-theme="dark"] :is(.brand, .mobile-brand, .epc-denied-brand, .epc-status-brand, .lm-auth__mbrand) .lm-logo[data-academy-brand-logo="academy"],
.lm-auth__brand .lm-logo[data-academy-brand-logo="academy"] { background: rgba(255, 255, 255, .95); border-radius: 12px; box-sizing: border-box; padding: 5px 10px; }
html[data-theme="dark"] .mobile-brand .lm-logo[data-academy-brand-logo="academy"] { padding: 3px 7px; border-radius: 9px; }

/* ------------------------------------------------------------------------------------------------ Academy context: the Academy NAME replaces the platform name beside the logo */
[data-academy-brand] > .lm-brand__text { display: flex; flex-direction: column; justify-content: center; margin-inline-start: 10px; min-width: 0; }
[data-academy-brand] .lm-brand__sub { display: none; }
[data-academy-brand] .lm-brand__name { color: inherit; font: 800 .95rem/1.2 var(--lm-sans, Manrope, system-ui, sans-serif); letter-spacing: 0; margin: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.dashboard-sidebar .brand[data-academy-brand] { align-items: flex-start; flex-direction: column; gap: 8px; }
.dashboard-sidebar .brand[data-academy-brand] > .lm-brand__text { margin-inline-start: 0; }
.dashboard-sidebar .brand[data-academy-brand] .lm-brand__name { max-width: 100%; }
.mobile-brand[data-academy-brand] .lm-brand__name { font-size: .88rem; max-width: 34vw; }
[data-academy-brand].epc-status-brand, [data-academy-brand].epc-denied-brand { flex-direction: column; gap: 8px; }
[data-academy-brand].epc-status-brand > .lm-brand__text, [data-academy-brand].epc-denied-brand > .lm-brand__text { align-items: center; margin-inline-start: 0; }
/* student portal compact header forces 64x30 for the LUMORA icon; an Academy logo keeps its proportions inside the same footprint, and the name is capped so the header controls never overflow */
html body[data-portal="student"] .mobile-brand .lm-logo[data-academy-brand-logo="academy"] { height: 28px; max-width: 64px; width: auto; }
.mobile-brand[data-academy-brand] { min-width: 0; max-width: 56vw; }
.mobile-brand[data-academy-brand] .lm-brand__name { max-width: 24vw; }