/*
 * trinkatitles.css
 * 
 * Styling for Trinkaloop Saga page titles (Trinkatitles)
 * These are custom PNG titles that can be displayed at the top of story pages
 */

.trinkatitle-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto 2rem;
}

/* Default: images scale relative to ixu. If --ixu is not set, fall back to existing percentage rules. */
.trinkatitle {
  width: calc(var(--ixu, 60px) * 6); /* default title width ~ 6 ixu (halved) */
  height: auto;
  max-width: 100%;
}

/* Size variants */
.trinkatitle.small {
  width: calc(var(--ixu, 60px) * 4); /* ~4 ixu (halved) */
}

.trinkatitle.medium {
  width: calc(var(--ixu, 60px) * 5); /* ~5 ixu (halved) */
}

.trinkatitle.large {
  width: calc(var(--ixu, 60px) * 7); /* ~7 ixu (halved) */
}

/* For chapter pages - positioned at the top */
.chapter-page .trinkatitle-container {
  margin: 2rem auto;
}

/* Glow effect option */
.trinkatitle.glow {
  filter: drop-shadow(0 0 5px var(--neoncyan, #2AFFF7));
}

/* For responsive design */
/* Keep portal trinkatitles fixed-size in ixu units so resizing the window doesn't change their visual size */
.portal .trinkatitle {
  /* Keep the three title layers the same constant size in ixu units */
  width: calc(var(--ixu, 60px) * 6) !important;
  height: auto !important;
  max-width: none !important;
}

@media (max-width: 768px) {
  /* If ixu is not available or smaller devices, fall back to slightly smaller ixu multiplier */
  .trinkatitle { width: calc(var(--ixu, 48px) * 6); }
  .portal .trinkatitle { width: calc(var(--ixu, 48px) * 6) !important; }
}