/**
 * Theme overrides – loaded after main stylesheet.
 * Ensures "FORMS OF COMMONS" is identical on homepage and about overlay; lightbox close visible.
 */

/* About overlay title: same typography and position as #logo-title (centered at top) */
#about-modal .about-modal-title.grid-title,
.about-popup .about-modal-title.grid-title {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 625px !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1rem 0 !important; /* same as .grid-title on homepage */
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 10001 !important;
  /* Typography matches .grid-title / #logo-title exactly */
  text-transform: uppercase !important;
  font-family: 'TimesNewRoman', 'Times New Roman', serif !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  color: #fff !important;
  line-height: 1.2 !important;
}

/* About modal close button – thin X, vertically aligned with center of title (top=0, height ~80px) */
#about-modal .about-close,
.about-popup .about-close {
  position: fixed !important;
  /* Align vertically with middle of .about-modal-title: title center ≈ 40px, button 2rem → top 1.5rem */
  top: 1.5rem !important;
  right: 2rem !important;
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  padding: 0.25rem !important;
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10002 !important;
  opacity: 0.85 !important;
  pointer-events: auto !important;
}

#about-modal .about-close:hover,
.about-popup .about-close:hover {
  color: #e5e7eb !important;
  opacity: 1 !important;
}

/* Thin X icon – small, light stroke; pointer-events: none so button receives click (fixes double-click) */
#about-modal .about-close svg,
.about-popup .about-close svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 1.25 !important;
  pointer-events: none !important;
}

/* Lightbox close button – ensure visible */
#lightbox-close-btn,
.lightbox-modal .lightbox-close {
  display: flex !important;
  visibility: visible !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  pointer-events: auto !important;
}

.lightbox-modal .lightbox-close svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
}

/* Lightbox title: not bold, italic */
.lightbox-modal #lightbox-title,
.lightbox-modal .lightbox-description h3#lightbox-title {
  font-weight: normal !important;
  font-style: italic !important;
}

.lightbox-modal .lightbox-description {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 0.5em !important;
}

.lightbox-modal .lightbox-description h3#lightbox-title {
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  margin-right: 0 !important;
}

/* Lightbox caption text: not bold, not italic (roman) */
.lightbox-modal .lightbox-description #lightbox-text {
  font-size: 0.9rem !important;
  font-weight: normal !important;
  font-style: normal !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* About modal body text: same size as lightbox caption (0.9rem / 0.75rem mobile) */
#about-modal .about-text,
#about-modal .about-text p,
.about-popup .about-text,
.about-popup .about-text p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* Grid image labels (e.g. ARC.02): overrides dist so no build needed */
#images-grid .label-text,
.label-text {
  font-size: 0.5rem !important;
}

/* Lightbox – content scrollable when image + caption exceed viewport */
.lightbox-modal {
  overflow: hidden !important;
  height: 100vh !important;
}

.lightbox-modal .lightbox-content {
  height: 100vh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 5rem 2rem 1.5rem 2rem !important;
}

.lightbox-modal .lightbox-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

.lightbox-modal .lightbox-image-container {
  display: block !important;
  overflow: visible !important;
  margin: 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.lightbox-modal .lightbox-image-slot-wrap {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  vertical-align: top !important;
}

/* Images ~10% smaller to leave room for caption */
.lightbox-modal .lightbox-image-slot {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  max-height: calc((100vh - 11rem) * 0.9) !important;
  margin: 0 auto !important;
}

/* width set by JS to match image; no !important so inline style wins */
.lightbox-modal .lightbox-description {
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.lightbox-modal .lightbox-image {
  display: block !important;
  max-width: 100% !important;
  max-height: calc((100vh - 11rem) * 0.9) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  #about-modal .about-modal-title.grid-title,
  .about-popup .about-modal-title.grid-title {
    font-size: 1.8rem !important;
    padding: 0.5rem 0 !important; /* match .grid-title mobile padding */
  }

  /* About modal body text: same as lightbox caption on mobile */
  #about-modal .about-text,
  #about-modal .about-text p,
  .about-popup .about-text,
  .about-popup .about-text p {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }

  /* Grid image labels: mobile */
  #images-grid .label-text,
  .label-text {
    font-size: 0.45rem !important;
  }

  /* Keep close button aligned with title center on mobile */
  #about-modal .about-close,
  .about-popup .about-close {
    top: 1rem !important;
    right: 1rem !important;
  }
}

@media (max-width: 480px) {
  #images-grid .label-text,
  .label-text {
    font-size: 0.4rem !important;
  }
}