@charset "utf-8";
/* CSS Document */
  :root{
    /* change these if your layout widths change */
    --outer-container: 800px;   /* your .peopleMainLarge max-width */
    --inner-content: 550px;     /* your .limitWidth max-width */
    --arrow-size: 44px;         /* visual size of arrow button */
    /* computed offset = half of inner-content + half of gap between inner and outer
       gap = (outer - inner) / 2
       offset = inner/2 + gap/2 = inner/2 + (outer-inner)/4
       For outer=800, inner=550 -> offset = 275 + 62.5 = 337.5px
    */
    --arrow-offset: 310px; /*337.5 update if you change outer/inner */
    --tooltip-bg: #DDD;
    --tooltip-color: #800080; /* red text */
    --tooltip-padding: 6px 9px;
    --tooltip-radius: 6px;
    --tooltip-delay: 0s; /* instant show */
    --tooltip-duration: 0.12s; /* quick transition */
  }

  /* page layout sample (your existing rules) */
  body.peopleBody {
    max-width: var(--outer-container);
    margin-left:auto;
    margin-right:auto;
    padding: 4px;
    border-radius: 8px;
    border: 3px groove;
    box-sizing: border-box;
  }
  .peopleMainLarge { max-width: var(--outer-container); margin-left:auto; margin-right:auto; }
  .limitWidth { max-width: var(--inner-content); position:relative; margin-left:auto; margin-right:auto; }

  /* NAV ARROWS - base styles */
  .nav-arrow {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%); /* will center the arrow at the calculated point */
    width: var(--arrow-size);
    height: var(--arrow-size);
    line-height: var(--arrow-size);
    text-align: center;
    border-radius: 50%;
    background: #DDD;
    color: #800080;
    text-decoration: none;
    font-size: 22px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, background .12s ease;
    user-select: none;
  }
  .nav-arrow:active { transform: translate(-50%, -50%) scale(0.98); }

  /* computed horizontal positions (center ± offset) */
  .nav-arrow.left  { left: calc(50% - var(--arrow-offset)); }
  .nav-arrow.right { left: calc(50% + var(--arrow-offset)); }

  /* hide on narrow screens */
  @media (max-width: 650px) {
    .nav-arrow { display: none; }
  }

  /* TOOLTIP (pseudo-element) */
  .nav-arrow::after{
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    bottom: calc(100% + 10px); /* above the circle */
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tooltip-duration) ease, transform var(--tooltip-duration) ease;
    /* reduce delay so it appears faster than default title */
    transition-delay: var(--tooltip-delay);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    z-index: 10000;
  }

  /* little arrow nub */
  .nav-arrow::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    bottom: calc(100% + 4px);
    border-width: 6px;
    border-style: solid;
    border-color: var(--tooltip-bg) transparent transparent transparent;
    opacity: 0;
    transition: opacity var(--tooltip-duration) ease;
    transition-delay: var(--tooltip-delay);
    z-index: 10000;
  }

  /* show tooltip on hover/focus or when we add .show */
  .nav-arrow:hover::after,
  .nav-arrow:focus::after,
  .nav-arrow.show::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .nav-arrow:hover::before,
  .nav-arrow:focus::before,
  .nav-arrow.show::before {
    opacity: 1;
  }

  /* accessible focus outline */
  .nav-arrow:focus {
    outline: 3px solid rgba(255,255,255,0.12);
    outline-offset: 4px;
  }