/* -----------------------------------------------------------
   NAVBAR WRAP
----------------------------------------------------------- */
.navbar-nav .nav-link {
  white-space: normal !important;
  line-height: 1.2;
  text-align: center;
  max-width: 300px;
}

/* -----------------------------------------------------------
   DESKTOP: UNIFIED CONTENT SHIFT (ALL TABS)
----------------------------------------------------------- */
#quarto-content,
.quarto-content,
.page-body,
.body-content,
main {
  margin-left: 320px !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------
   DESKTOP: LEFT COLUMN (3 IMAGES)
----------------------------------------------------------- */
.left-image-column {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: auto;
  overflow: visible;
  z-index: 9999;
}

.left-image-column img {
  width: 300px;
  display: block;
}

/* -----------------------------------------------------------
   DESKTOP: SECOND COLUMN (BLACKBOARD)
----------------------------------------------------------- */
.second-image-column {
  position: fixed;
  top: 0;
  left: 300px;
  width: 300px;
  height: 100vh;
  overflow: hidden;
  z-index: 9999;

  background-image: url("images/blackboard.webp");
  background-size: 285%;
  background-repeat: no-repeat;
  background-position: top left;
}

/* -----------------------------------------------------------
   MOBILE LAYOUT (TWO FIXED RIBBONS)
----------------------------------------------------------- */
@media (max-width: 768px) {

  /* -----------------------------------------------------------
     OVERRIDE QUARTO MOBILE WRAPPERS (CRITICAL FIX)
  ----------------------------------------------------------- */
  .quarto-container,
  .page-columns,
  .page-full,
  .content,
  .page-body,
  main {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-x: visible !important;
  }

  /* -----------------------------------------------------------
     MOBILE RIBBON 1 (Images 1–3)
  ----------------------------------------------------------- */
  .left-image-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;   /* FIX: full viewport width */
    height: 120px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 9999;
    background: transparent !important;
  }

  .left-image-column img {
    height: 120px !important;
    width: auto !important;
    flex-shrink: 0;
    object-fit: cover;
    display: inline-block;
  }

  /* -----------------------------------------------------------
     MOBILE RIBBON 2 (Blackboard)
  ----------------------------------------------------------- */
  .second-image-column {
    position: fixed !important;
    top: 120px !important;      /* directly under ribbon 1 */
    left: 0 !important;
    width: 100vw !important;    /* FIX: full viewport width */
    height: 80px !important;    /* narrow horizontal bar */
    display: block !important;
    overflow: hidden !important;

    background-image: url("images/blackboard.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    z-index: 9998;
  }

  /* -----------------------------------------------------------
     MOBILE CONTENT SHIFT (NOW ACCURATE)
  ----------------------------------------------------------- */
  #quarto-content,
  .quarto-content,
  .page-body,
  .body-content,
  main {
    margin-left: 0 !important;
    margin-top: 200px !important; /* 120 + 80 */
  }
}