/* =========================================================
   ADGC – Reusable Block: Author Instructions / Journal Nav
   Left column: sticky panel
   Top: image/title
   Bottom: scrollable links
========================================================= */

/***** VARIABLES *****/
:root {
  --dark-cerulean: #004b82;
  --paolo-veronese-green: #01927e;
  --black: #000000;
  --white: #ffffff;
  --roman-silver: #868193;
  --quartz: #4B4657;
  --platinum: #E1DEE8;
  --azureish-white: #d9efec;
}

/***** JOURNAL NAV BASE *****/

.custom-journal-nav,
.custom-journal-scrollable-list {
  box-sizing: border-box;
  background-color: var(--quartz); /* already via has-quartz-background-color, safe */
  color: var(--white);
}

/* Top section: image + title + hr */
.custom-journal-nav {
  padding: 10px;
  border-radius: 5px 5px 0 0;
}

.custom-journal-sticky-image {
  text-align: center;
}

.custom-journal-nav img {
  width: auto;
  height: 180px;
}

.custom-journal-nav-title p {
  text-align: center;
}

/* Bottom section: scrollable links */
.custom-journal-scrollable-list {
  padding: 0 20px 20px;
  border-radius: 0 0 5px 5px;
}

.custom-journal-scrollable-list ul {
  list-style: none;
  padding-left: 20px;
}

.custom-journal-scrollable-list li {
  margin: 0 0 0.35rem;
}

.custom-journal-scrollable-list a {
  font-size: var(--wp--preset--font-size--small);
}

/***** STICKY + INTERNAL SCROLL (KEY PART) *****/

/* Only this specific columns layout */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493 {
  align-items: flex-start;
}

/* Make the LEFT COLUMN the sticky frame */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
  > .wp-block-column:first-child {
  position: sticky;
  top: 140px; /* adjust to sit under header/banner */
  align-self: flex-start;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

/* Top section (image/title) doesn't flex, stays pinned at top of panel */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
  > .wp-block-column:first-child
  > .custom-journal-nav {
  flex: 0 0 auto;
}

/* Bottom section fills rest; scrolls internally when too tall */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
  > .wp-block-column:first-child
  > .custom-journal-scrollable-list {
  flex: 1 1 auto;
  overflow-y: auto;

  /* hide scrollbar, keep scroll */
  scrollbar-width: none;       
  -ms-overflow-style: none;    
}

.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
  > .wp-block-column:first-child
  > .custom-journal-scrollable-list::-webkit-scrollbar {
  display: none;             
}

/* Optional: sticky blue banner only on pages with this nav */
main#site-content:has(.custom-journal-nav)
  > .wp-block-group.alignfull.has-dark-cerulean-background-color {
  position: sticky;
  top: 0;
  z-index: 1;
}
.custom-journal-nav,
.custom-journal-scrollable-list {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
@media (max-width: 900px) {

  /* Let Gutenberg handle stacking normally; just stop fighting it */
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493 {
    align-items: stretch !important;
  }

  /* Left column (nav): remove sticky & height limits */
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
    > .wp-block-column:first-child {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    display: block !important;
  }

  /* Make top/bottom nav sections behave like normal blocks */
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
    > .wp-block-column:first-child
    > .custom-journal-nav,
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
    > .wp-block-column:first-child
    > .custom-journal-scrollable-list {
    flex: 0 0 auto !important;
  }

  /* Remove internal scrolling on mobile so the whole list just flows */
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
    > .wp-block-column:first-child
    > .custom-journal-scrollable-list {
    overflow: visible !important;
    max-height: none !important;
  }

  /* So the top blue banner doesn't stay sticky on small screens */
  main#site-content:has(.custom-journal-nav)
    > .wp-block-group.alignfull.has-dark-cerulean-background-color {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Nice little image tweak so it doesn't feel huge on phones */
  .custom-journal-nav img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* Give the nav a bit of breathing room from the main text column */
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493
    > .wp-block-column:first-child {
    margin-bottom: 24px !important;
  }
}