/**
 * Sovereign Series™ Logo & Icon Sizing Governance — Codex Layer
 * DV8 Technology Group — CI/UX Enforcement
 *
 * Deterministic logo usage modes:
 *   • Dark/red logo + red icon  → light backgrounds
 *   • White logo + white icon   → dark/black UI shells
 *   • Prohibit mixed or low-contrast variants
 *
 * Prohibited transformations (Codex §9.1):
 *   • NO stretching (width/height mismatch)
 *   • NO colour overrides
 *   • NO gradients or shadows on logos
 *   • NO opacity reduction
 *   • NO mixing red + white logos in same container
 *
 * Visual hierarchy (Codex §11): Logo > Page Title > Icons > Content
 */

/* ====================================================================
   1. CSS Custom Properties — Codex Governance Tokens
   ==================================================================== */
:root {
  /* Logo asset paths */
  --ss-logo-primary: url('/images/sovereign-series/ss-wordmark-red.png');
  --ss-logo-black: url('/images/sovereign-series/ss-wordmark-black.png');
  --ss-logo-white: url('/images/sovereign-series/ss-wordmark-white.png');
  --ss-logo-icon: url('/images/sovereign-series/ss-icon.png');
  --ss-logo-icon-light: url('/images/ss-white.png');

  /* Icon size scale (Codex §5.1) */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Logo sizing thresholds (Codex §3) */
  --logo-header-height: 32px;
  --logo-header-min: 28px;
  --logo-header-max: 36px;
  --logo-hero-height: 56px;
  --logo-hero-min: 48px;
  --logo-hero-max: 72px;
  --logo-compact-height: 24px;

  /* Clear space — 0.5 x logo height minimum (Codex §4) */
  --logo-clearspace: 0.5em;

  /* Touch target minimum (Codex §5.3) */
  --touch-target: var(--touch-min, 44px);
}

/* ====================================================================
   2. Logo Component — Base .ss-logo (Codex §3)
   ==================================================================== */

.ss-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  vertical-align: middle;
  border-radius: var(--radius-sm, 4px);
  transition: opacity var(--transition-fast, 120ms) ease;
}

.ss-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.ss-logo:hover {
  opacity: 0.92;
  text-decoration: none;
}

.ss-logo:focus-visible {
  outline: 2px solid var(--dv8-red, #C92736);
  outline-offset: 2px;
}

.ss-logo__img {
  display: block;
  width: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.ss-theme-variant {
  display: none;
}

html[data-theme="light"] .ss-theme-variant--light,
html:not([data-theme="dark"]) .ss-theme-variant--light {
  display: block;
}

html[data-theme="dark"] .ss-theme-variant--dark {
  display: block;
}

/* ====================================================================
   3. Logo Sizing Modes (Codex §3.1–§3.3)
   ==================================================================== */

/* 3.1 Header / Dashboard context */
.ss-logo--header .ss-logo__img,
.logo-header .ss-logo__img,
.ss-logo--md .ss-logo__img {
  height: var(--logo-header-height);
  min-height: var(--logo-header-min);
  max-height: var(--logo-header-max);
}

/* 3.2 Login / Landing / Hero context */
.ss-logo--hero .ss-logo__img,
.logo-hero .ss-logo__img,
.ss-logo--lg .ss-logo__img {
  height: var(--logo-hero-height);
  min-height: var(--logo-hero-min);
  max-height: var(--logo-hero-max);
}

/* 3.3 Sidebar / Compact mode */
.ss-logo--compact .ss-logo__img,
.logo-compact .ss-logo__img,
.ss-logo--sm .ss-logo__img {
  height: var(--logo-compact-height);
}

/* ====================================================================
   4. Icon Component — .ss-logo-icon (Codex §5)
   ==================================================================== */

.ss-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  vertical-align: middle;
  border-radius: var(--radius-sm, 4px);
  transition: transform var(--transition-fast, 120ms) ease;
}

.ss-logo-icon:hover {
  transform: scale(1.05);
}

.ss-logo.is-decorative,
.ss-logo-icon.is-decorative {
  pointer-events: none;
}

.ss-logo.is-decorative:hover {
  opacity: 1;
}

.ss-logo-icon.is-decorative:hover {
  transform: none;
}

.ss-logo-icon:focus-visible {
  outline: 2px solid var(--dv8-red, #C92736);
  outline-offset: 2px;
}

.ss-logo-icon__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Icon size variants (Codex §5.1) */
.ss-logo-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.ss-logo-icon--md { width: var(--icon-md); height: var(--icon-md); }
.ss-logo-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.ss-logo-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* Icon button — touch target enforcement (Codex §5.3) */
.icon-button {
  width: var(--touch-target);
  height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}

/* ====================================================================
   5. Clear Space Enforcement (Codex §4)
   ==================================================================== */

.logo-container,
.ss-logo-container {
  padding-left: var(--logo-clearspace);
  padding-right: var(--logo-clearspace);
}

/* ====================================================================
   6. Theme Context — Light Background (Codex §2.2)
   ==================================================================== */

.ss-logo-context--light .ss-logo__img,
.ss-logo--on-light .ss-logo__img {
  filter: none;
}

.ss-logo-context--light .ss-logo-icon__img,
.ss-logo-icon--on-light .ss-logo-icon__img {
  filter: none;
}

/* ====================================================================
   7. Theme Context — Dark Background (Codex §2.2)
   ==================================================================== */

.ss-logo-context--dark .ss-logo__img,
.ss-logo--on-dark .ss-logo__img {
  filter: none;
}

.ss-logo-context--dark .ss-logo-icon__img,
.ss-logo-icon--on-dark .ss-logo-icon__img {
  filter: none;
}

/* ====================================================================
   8. Header Layout — Logo Left, Actions Right (Codex §6)
   ==================================================================== */

.qs-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-right: 1rem;
  padding-left: var(--logo-clearspace);
  padding-right: var(--logo-clearspace);
}

.qs-topbar-brand .ss-logo-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.qs-topbar-brand .ss-logo__img {
  height: var(--logo-header-height);
  min-height: var(--logo-header-min);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ====================================================================
   9. Dashboard Brand Anchor — Top-Left (Codex §6.2)
   ==================================================================== */

.dashboard-brand-anchor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding-right: var(--logo-clearspace);
}

.dashboard-brand-anchor .ss-logo-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
}

.dashboard-brand-anchor .ss-logo__img {
  height: var(--logo-header-height);
}

/* ====================================================================
   10. Sidebar Brand — Compact Mode (Codex §3.3)
   ==================================================================== */

.qs-sidebar-brand .ss-logo {
  padding: 0.25rem 0;
}

.qs-sidebar-brand .ss-logo__img {
  height: var(--logo-compact-height);
  filter: none;
}

.qs-sidebar.collapsed .qs-sidebar-brand .ss-logo__img {
  display: none;
}

.qs-sidebar-brand .ss-logo-icon {
  flex-shrink: 0;
}

/* ====================================================================
   11. Auth / Hero Layout — Large Logo (Codex §3.2)
   ==================================================================== */

.dv8-auth-aside .ss-logo--lg,
.dv8-auth-aside .ss-logo--hero {
  margin-bottom: 1rem;
  justify-content: center;
}

.dv8-auth-aside .ss-logo--lg .ss-logo__img,
.dv8-auth-aside .ss-logo--hero .ss-logo__img {
  height: var(--logo-hero-height);
  max-height: var(--logo-hero-max);
  max-width: 240px;
}

/* ====================================================================
   12. Vetting Layout — Progress Header (Codex §3.1)
   ==================================================================== */

.vetting-progress-header .ss-logo {
  flex-shrink: 0;
  margin-right: 1rem;
}

.vetting-progress-header .ss-logo-icon {
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.vetting-progress-header .ss-logo__img {
  height: var(--logo-header-height);
}

/* ====================================================================
   13. Contextual Icon Area — Top-Right Reserved (Codex §6.3)
   ==================================================================== */

.qs-topbar-right .qs-alert-btn,
.qs-topbar-right .qs-user-pill {
  font-size: 1rem;
  line-height: 1;
}

.qs-topbar-right .qs-alert-btn i,
.qs-topbar-right .qs-user-pill i {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================================================================
   14. Footer Brand
   ==================================================================== */

.qs-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  font-size: 0.75rem;
  color: #6B7280;
  border-top: 1px solid var(--border);
  background: #F9FAFB;
}

.qs-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qs-footer-links {
  display: flex;
  align-items: center;
  gap: 0;
}

.qs-footer-links a {
  color: #6B7280;
  text-decoration: none;
  transition: color 120ms ease;
}

.qs-footer-links a:hover {
  color: var(--dv8-red, #C92736);
  text-decoration: underline;
}

.qs-footer-sep {
  margin: 0 0.5rem;
  color: #D1D5DB;
}

/* ====================================================================
   15. Responsive Scaling (Codex §8)
   ==================================================================== */

@media (max-width: 1024px) {
  .qs-topbar-brand .ss-logo__img {
    height: var(--logo-header-min);
  }

  .dashboard-brand-anchor .ss-logo__img {
    height: var(--logo-header-min);
  }
}

@media (max-width: 768px) {
  :root {
    --logo-header-height: 28px;
  }

  .qs-topbar-brand .ss-logo {
    display: none;
  }

  .qs-topbar-brand .ss-logo-icon {
    width: var(--icon-md);
    height: var(--icon-md);
  }

  .dashboard-brand-anchor .ss-logo {
    display: none;
  }

  .ss-logo--lg .ss-logo__img,
  .ss-logo--hero .ss-logo__img {
    height: var(--logo-hero-min);
  }

  .ss-logo-icon {
    width: var(--icon-md);
    height: var(--icon-md);
  }

  .qs-footer {
    flex-direction: column;
    text-align: center;
    padding: 0.75rem 1rem;
  }
}

@media (min-width: 1200px) {
  .qs-topbar-brand .ss-logo__img,
  .dashboard-brand-anchor .ss-logo__img {
    height: var(--logo-header-max);
  }
}

/* ====================================================================
   16. Baseline Alignment (Codex §7.1)
   ==================================================================== */

.ss-logo,
.ss-logo-icon,
.ss-logo__img,
.ss-logo-icon__img {
  vertical-align: middle;
}

/* ====================================================================
   17. Reduced Motion
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ss-logo,
  .ss-logo-icon {
    transition: none;
  }

  .ss-logo-icon:hover {
    transform: none;
  }
}

/* ====================================================================
   18. High Contrast Mode
   ==================================================================== */

@media (forced-colors: active) {
  .ss-logo:focus-visible,
  .ss-logo-icon:focus-visible {
    outline: 2px solid LinkText;
  }

  .ss-logo__img,
  .ss-logo-icon__img {
    forced-color-adjust: none;
  }
}

/* ====================================================================
   19. Print
   ==================================================================== */

@media print {
  .ss-logo__img {
    filter: none !important;
  }

  .ss-logo-icon {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}