/* ===========================
   DCMS Logo Component Styles
   =========================== */

/* Map DCMS colors to your site tokens, with fallbacks */
:root{
  --dcms-brand:   var(--brand,   #4a90e2);
  --dcms-brand-2: var(--brand-2, #3ddad7);
  --dcms-brand-3: var(--accent,  #a780ff);
  --dcms-pip: #eef2ff;
}

/* Layout helper for the anchor wrapping the logo */
.logo-link{
  display:flex; align-items:center; margin-right:auto;
}

/* Logo lockup (icon + wordmark) */
.dcms-logo.nav-logo{
  --dcms-size: 38px;                 /* icon size on desktop */
  display:inline-flex; align-items:center; gap:10px;
  line-height:1;
}

.dcms-logo .dcms-mark svg{
  height: var(--dcms-size);
  width: auto;
  display:block;
}

/* Wordmark */
.dcms-logo .dcms-word{
  display:flex; flex-direction:column;
}
.dcms-logo .dcms-acronym{
  font-weight:800;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing:.3px;
  color:#e7eaf6;                      /* good on your dark header */
}
.dcms-logo .dcms-tag{
  margin-top:2px;
  font-weight:600;
  font-size: clamp(10px, 1.1vw, 11.5px);
  color:#c7d2fe;
  opacity:.95;
}

/* Subtle 3D hover tilt */
.dcms-logo[data-animate="true"] .hover-tilt{
  transform-origin:50% 50%;
  transition: transform .28s ease;
}
.logo-link:hover .hover-tilt{
  transform: perspective(600px) rotateX(6deg) rotateY(-6deg) translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  .dcms-logo[data-animate="true"] .hover-tilt{ transition:none; }
  .logo-link:hover .hover-tilt{ transform:none; }
}

/* Responsive: icon-only on smaller screens */
@media (max-width:980px){
  .dcms-logo.nav-logo{ --dcms-size: 30px; gap:8px; }
  .dcms-logo .dcms-word{ display:none; }
}

/* Optional: quick variants you can apply with a class if needed */
.dcms-logo--bigger{ --dcms-size: 42px; }
.dcms-logo--iconOnly .dcms-word{ display:none !important; }