/* Oklahoma Force -- Canonical Authenticated Brand Header component.
   Established 2026-08-10 per Holly's explicit direction (docs/branding-ecosystem-audit.html,
   docs/design-system.md §9.10). Every authenticated product links this file for its brand header --
   Force HQ, Family Portal, Producer, Sponsor Workspace, Sponsor Payment Report, and any future
   authenticated product. Do not create an independent brand-header implementation; extend this file.

   Two variants, tied to shell weight, not brand family:
     .ofBrandHeader           -- Full App Shell (persistent sidebar): Force HQ, Family Portal.
     .ofBrandHeader--compact  -- Lightweight Utility Shell (topbar, no nav): Producer, Sponsor
                                  Workspace, Sponsor Payment Report.
   Brand family (Administrative "Oklahoma Force HQ" vs. Family-facing "Oklahoma Force") is plain text
   content, not separate CSS -- both variants render whatever org/sub text the page provides.

   Contextual/user-specific info (season, player name, sponsor name, account, etc.) is NEVER part of
   this component -- .ofBrandContext is a deliberately separate, visually secondary element for that,
   placed outside .ofBrandHeader by the page itself. See the "user-specific information" principle in
   docs/branding-ecosystem-audit.html. */

.ofBrandHeader{display:flex;flex-direction:column;align-items:center;gap:20px;padding:26px 18px 16px;text-align:center;text-decoration:none;color:inherit}
.ofBrandHeader[hidden]{display:none} /* equal-specificity [hidden] vs. this class's own display:flex -- see docs/decision-log.md 2026-08-10 sign-in consistency entry for why this rule must exist explicitly */
.ofBrandHeader:hover{opacity:.88}
.ofBrandMark{display:block;width:96px;height:96px;flex:0 0 auto;object-fit:contain}
.ofBrandName{display:block;margin-top:2px;font-size:15.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;text-transform:uppercase}
.ofBrandSub{display:block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;opacity:.75}

/* Lightweight Utility Shell (topbar) variant -- horizontal, left-aligned, compact mark */
.ofBrandHeader--compact{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:14px 20px;text-align:left}
.ofBrandHeader--compact .ofBrandMark{width:40px;height:40px}
.ofBrandHeader--compact .ofBrandNameGroup{display:flex;flex-direction:column}
.ofBrandHeader--compact .ofBrandName{margin-top:0;font-size:15.5px}
.ofBrandHeader--compact .ofBrandSub{margin-top:0;font-size:11.5px}

/* Contextual info line -- season, player, sponsor, account, etc. Deliberately outside
   .ofBrandHeader; the top border/margin is what visually separates "who/when" from "what product." */
.ofBrandContext{margin-top:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;font-weight:500;opacity:.75;text-align:center}