/* Site Info page-specific styling
   Goal: match the visual language of index.css but optimize layout for siteinfo.html.
*/

/* Smooth page transitions already handled in index.css; keep minimal overrides here. */

/* Make sure the section and header look like other glass panels */
#SiteInfoSection{
  padding: 16px;
}

#SiteInfoSection > header{
  border-radius: var(--radius-xl);
  padding: 6px 6px 10px;
  overflow: hidden;
  position: relative;
}

/* Title sizing similar to Home */
#SiteInfoSection > header h1{
  margin: 8px 10px 12px;
  font-size: clamp(24px, 3vw, 36px);
}

/* The content is a single long paragraph; switch home-text grid into readable single-column */
#SiteInfoSection .home-text{
  margin-top: 14px;
  padding: 16px;
  display: block;
  width: 55%;
  box-sizing: border-box;
}


#SiteInfoSection .home-text p{
  margin: 0;
  line-height: 1.75;
  font-size: 15.7px;
}

/* Improve text wrapping on narrow screens */
#SiteInfoSection .home-text p{
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}

/* Subtle scanline/glass highlight similar to index.css home accents */
#SiteInfoSection,
#SiteInfoSection > header,
#SiteInfoSection .home-text{
  position: relative;
}

#SiteInfoSection::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.0) 100%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.0) 6px,
      rgba(39,207,255,.05) 7px,
      rgba(255,255,255,.0) 14px
    );
  opacity: .35;
  mix-blend-mode: soft-light;
}

/* Keep images/iframes consistent if added later */
#SiteInfoSection img,
#SiteInfoSection iframe{
  border-radius: var(--radius-lg);
}

/* Accessibility: don’t force motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
  }
}