/* About Sidebar Block - Frontend Styles */

/* Ensure parent containers allow sticky positioning relative to the page */
.wp-block-columns:has(.synpact-about-sidebar) {
  align-items: flex-start;
}

.wp-block-column:has(.synpact-about-sidebar) {
  align-self: flex-start;
  /* No min-height needed - let content column determine scroll height */
}

/* Sticky positioning on the wrapper only */
.synpact-about-sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 10vh; /* Distance from top when stuck */
  align-self: flex-start;
  height: fit-content;
  max-height: calc(
    100vh - 40px
  ); /* Prevent it from being taller than viewport */
  overflow-y: auto; /* Allow scrolling if content is too long */
  z-index: 10; /* Ensure it stays above other content */
}

/* Section spacing */
.synpact-about-sidebar .sidebar-section,
.about-sidebar .sidebar-section {
  margin-bottom: 3vh;
}

.synpact-about-sidebar .sidebar-section:last-child,
.about-sidebar .sidebar-section:last-child {
  margin-bottom: 0;
}

/* Parent Link (clickable, goes to different pages) */
.synpact-about-sidebar .sidebar-parent-link,
.about-sidebar .sidebar-parent-link {
  display: inline-block;
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  color: #333;
  text-decoration: none;
  margin: 0 0 1vh 0;
  padding: 0.5vh 1vw;
  border-radius: 5vw;
  transition: background-color 0.3s ease;
}

/* Active state - maroon background */
.synpact-about-sidebar .sidebar-parent-link.active,
.about-sidebar .sidebar-parent-link.active,
.synpact-about-sidebar .sidebar-parent-link:hover,
.about-sidebar .sidebar-parent-link:hover {
  background-color: #ae2761;
  color: white;
}

/* Subtitles container */
.synpact-about-sidebar .sidebar-nav,
.about-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  padding-left: 3vw;
  margin-bottom: 3vh;
}

/* Subtitles (non-clickable text) */
.synpact-about-sidebar .sidebar-subtitle,
.about-sidebar .sidebar-subtitle {
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: italic;
  color: #333;
  font-weight: 400;
}

/* Old deprecated styles for backward compatibility */
.synpact-about-sidebar .sidebar-title,
.about-sidebar .sidebar-title {
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  color: #333;
  margin: 0 0 2vh 0;
  line-height: 1.3;
}

.synpact-about-sidebar .sidebar-link,
.about-sidebar .sidebar-link {
  padding-left: 3vw;
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: italic;
  color: #333;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.synpact-about-sidebar .sidebar-link:hover,
.about-sidebar .sidebar-link:hover {
  opacity: 0.7;
}

.synpact-about-sidebar .sidebar-link.active,
.about-sidebar .sidebar-link.active {
  font-weight: bold;
  opacity: 1;
}

@media (max-width: 768px) {
  .wp-block-column:has(.synpact-about-sidebar) {
    min-height: auto !important;
  }
  /* Disable sticky on mobile and make horizontal layout */
  .synpact-about-sidebar {
    position: static;
    margin-bottom: 3vh;
    max-height: none;
    overflow-y: visible;
  }

  .synpact-about-sidebar .about-sidebar,
  .about-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2vw;
    justify-content: center;
  }

  /* Make sections display as columns */
  .synpact-about-sidebar .sidebar-section,
  .about-sidebar .sidebar-section {
    margin-bottom: 0;
    flex: 0 1 auto;
  }

  /* Hide subtitles on mobile */
  .synpact-about-sidebar .sidebar-nav,
  .about-sidebar .sidebar-nav {
    display: none;
  }

  /* Adjust parent link spacing on mobile */
  .synpact-about-sidebar .sidebar-parent-link,
  .about-sidebar .sidebar-parent-link {
    margin: 0;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
  }

  /* Make sidebar blocks display inline for grid layout */
  .synpact-about-sidebar {
    display: block;
    width: 100%;
    margin: 0 0 3vh 0;
    padding: 0;
    background: transparent;
    border: none;
  }
}