/* ==========================================================================
   HolaTrainers! — the ONE logo definition.

   Every page (public site, auth, onboarding, learner / trainer / admin
   dashboards, emails use the same look inline) renders the logo through
   resources/views/partials/brand-logo.blade.php, and that markup is styled
   only by this file. Do not copy these rules into another stylesheet — change
   them here and every page follows.

   Logo = blue rounded square with a white "H"  +  wordmark "hola" (brand blue)
   and "Trainers!" (near-black on light backgrounds, white on dark ones).

   Sizing is em-based, so the proportions are identical at every size; only the
   font-size of the lockup changes (brand-lg / brand-md / brand-sm).
   ========================================================================== */

.app-brand-lockup {
  --brand-blue: #2563eb;        /* mark + "hola" on light backgrounds */
  --brand-blue-on-dark: #60a5fa;/* "hola" on dark backgrounds (AA contrast) */
  --brand-ink: #0f172a;         /* "Trainers!" on light backgrounds */
  --brand-ink-on-dark: #ffffff; /* "Trainers!" on dark backgrounds */

  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 1.25rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; white-space: nowrap;
  color: var(--brand-ink); text-decoration: none; flex-shrink: 0;
}
.app-brand-lockup.brand-lg { font-size: 1.25rem; }  /* site headers  */
.app-brand-lockup.brand-md { font-size: 1.1rem; }   /* sidebars, footers, auth */
.app-brand-lockup.brand-sm { font-size: 1rem; }     /* mobile bars, onboarding */

.app-brand-icon {
  width: 1.4em; height: 1.4em; border-radius: 0.4em; position: relative;
  flex-shrink: 0; background: var(--brand-blue, #2563eb);
}
.app-brand-icon::after {
  content: "H"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.65em; font-family: inherit; line-height: 1;
}

.brand-wordmark { display: inline-flex; align-items: baseline; font-family: inherit; }
.brand-hola { color: var(--brand-blue, #2563eb); }
.brand-rest { color: var(--brand-ink, #0f172a); }

/* On a dark background: lighter blue for "hola", white for "Trainers!".
   The blue mark stays exactly the same; a hairline ring keeps its edge
   visible against navy. */
.app-brand-lockup.brand-on-dark .brand-hola { color: var(--brand-blue-on-dark); }
.app-brand-lockup.brand-on-dark .brand-rest { color: var(--brand-ink-on-dark); }
.app-brand-lockup.brand-on-dark .app-brand-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }

a.app-brand-lockup:hover { opacity: 0.88; }
a.app-brand-lockup:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 6px; }

/* Dashboard sidebar / drawer: logo on top, optional portal label under it. */
.db-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.db-brand .db-brand-sub {
  display: block; font-size: 0.72rem; color: var(--text-muted, #64748b);
  font-weight: 600; white-space: nowrap; letter-spacing: 0;
}

/* Footer brand column: a little air between logo and the about text. */
.app-footer-wrapper .app-brand-lockup { margin-bottom: 8px; }
/* Onboarding card: logo sits on its own row. (.mobile-logo's show/hide is handled in login.css.) */
.bo-brand { display: flex; align-items: center; }