/* ================================
   Publication footer rail (mobile-first)
   - Hidden on phones (pager takes over)
   - Active on desktop (≥ 896px)
   ================================ */

/* Base: hide the rail on mobile */
.publication-rail { display: none; }

/* Desktop & up: show the rail and apply full styling */
@media (min-width: 896px) {
  .publication-rail {
    /* core tokens */
    --rail-h: 56px;      /* was 65 */
    --rail-gap: 20px;    /* was 28 */
    --rail-font-size: 15px;
    --rail-line: 1.2;
    --rail-letter-space: .01rem;
    --rail-lines: 2;
    /* start conservative; we bump this up at wider breakpoints */
    --rail-ch: 14;


    /* gutters (reduce left offset before first item) */
    --rail-pad-x: 10px;   /* was 16 */
    --rail-pad-y: 6px;   /* was 8.5 */

             /* clamp(min, preferred, max) → increase fade by bumping up middle unit.
              → use 14vw, but never smaller than 160px and never larger than 280px. */
    --fade-w: clamp(160px, 18vw, 320px); /* wider so it always reaches items */

    /* scrollbar math */
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    /* scrollbar gutter width (0 on overlay scrollbars) */
    --sbw: max(0px, calc(100vw - 100%));
  }

  /* Variant — compact option */
  .publication-rail.is-compact {
    --rail-h: 52px;
    --rail-gap: 16px;
    --rail-pad-x: 6px;
    --rail-pad-y: 5px;
  }

  /* Container: keeps content bottom-aligned so the native scrollbar sits on the edge */
  .publication-rail .pubrail-inner {
    position: relative;
    z-index: 0;
    min-height: var(--rail-h);
    height: auto;
    padding-block: var(--rail-pad-y) 0;
    display: flex;
    align-items: center; /* center items vertically (was flex-end) */
  }

  /* Horizontal scroller: one row, smooth scroll, and subtle spacing so links feel centered vertically */
  .publication-rail .pubrail-scroller {
    display: flex;
    align-items: center;
    gap: var(--rail-gap);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 1px; /* was 8 */
    margin: 0;
    background: transparent;

    /* Scrollbar styles */
    /*scrollbar-width: thin;    /* Firefox */
    /*scrollbar-color: rgba(0,0,0,.28) transparent;*/
  }

  /* Create visual left/right “gutters” without padding the scroller.
     These flex spacers don’t affect the scrollbar track. */
  .publication-rail .pubrail-scroller::before,
  .publication-rail .pubrail-scroller::after {
    content: "";
    flex: 0 0 var(--rail-pad-x);
  }

  /* engines that reserve gutter space (Chromium/Firefox support this) */
  @supports (scrollbar-gutter: stable) {
    .publication-rail .pubrail-scroller {
      scrollbar-gutter: stable both-edges;        /* avoids layout jumpiness */
    }
  }

    /* 3) On overlay-scrollbar engines (Safari/macOS), tuck the bar a hair lower */
  @supports (-webkit-touch-callout: none) {
    .publication-rail .pubrail-scroller {
      margin-bottom: -2px;  /* nudges the bar closer to the rail’s bottom edge */
    }
  }

  /* Desktop scrollbar cosmetics only (desktop = hover-capable) */
 /* @media (hover: hover) {
    .publication-rail .pubrail-scroller::-webkit-scrollbar {
      height: 6px;
      background: transparent;
    }
    .publication-rail .pubrail-scroller::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.28);
      border-radius: 8px;
    }
  } */

  /* Each Views row is one rail item */
  .publication-rail .pubrail-scroller .magazine-view-row {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  /* Link styling: allow internal wrapping, clamp to N lines, and cap width so long labels fold */
  .publication-rail:not(.is-tabs) .pubrail-scroller .magazine-view-row .menu-item {
    display: inline-block;
    white-space: normal !important;
    max-width: calc(var(--rail-ch) * 1ch) !important;
    text-align: center;
    font-size: var(--rail-font-size);
    font-weight: 500;
    line-height: var(--rail-line);
    color: var(--tulane-green);
    text-decoration: none;
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
    box-sizing: border-box;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rail-lines);
    line-clamp: var(--rail-lines);
    max-height: calc(var(--rail-lines) * var(--rail-line) * 1em);
  }

  .publication-rail:not(.is-tabs) .pubrail-scroller .menu-item:hover  {
    color: var(--tulane-green);
    background: rgba(232, 245, 230, 1);
  }

  .publication-nav-block-bottom .magazine-publication-list-block .menu-item.active {
    background-color: var(--tulane-green);
    color: var(--tulane-white);
    font-weight: 700;
  }

    /* 4) Give the whole fixed rail a little clearance from the viewport bottom */
  .publication-nav-block-bottom {
    padding-bottom: max(1px, env(safe-area-inset-bottom));
  }

  /* Edge fades: drawn above items; visibility toggled by .has-left / .has-right */
  .publication-rail .pubrail-inner::before,
  .publication-rail .pubrail-inner::after {
    content: "";
    position: absolute;
    inset-block: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
    background-blend-mode: normal, multiply;
  }

  /* Left fade — extend over wrapper padding; end fully opaque at edge */
  .publication-rail .pubrail-inner::before {
    left: var(--safe-left);
    width: calc(var(--fade-w) + var(--rail-pad-x) + var(--safe-left));
    background:
      linear-gradient( to left,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.10) 22%,
        rgba(255, 255, 255, 0.28) 45%,
        rgba(255, 255, 255, 0.55) 70%,
        rgba(255, 255, 255, 0.85) 90%,
        rgba(255, 255, 255, 1.00) 100%);
  }

  /* Right fade — also shift into the scrollbar gutter */
  .publication-rail .pubrail-inner::after {
    right: calc(-1 * var(--sbw) + var(--safe-right));
    width: calc(var(--fade-w) + var(--sbw) + var(--safe-right));
    background:
      linear-gradient(
        to right,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.10) 22%,
        rgba(255, 255, 255, 0.28) 45%,
        rgba(255, 255, 255, 0.55) 70%,
        rgba(255, 255, 255, 0.85) 90%,
        rgba(255, 255, 255, 1.00) 100%);
  }


  /*—————————————————————————————————————————————————————————————
    IS_TABS  — full-height bars with centered labels
  —————————————————————————————————————————————————————————————*/

  .magazine-publication-list-block-bottom.publication-rail.is-tabs {
    --rail-gap: 0;
    --rule: 4px;
    --rail-pad-x: 0px;
    overflow: visible;
    background: white;
    border-top: 1px solid rgb(var(--coffee-rgb) / 0.825);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
    box-shadow: none; /* leaving initial above just in case */
    box-shadow: 0 -10px 22px -16px rgb(0 0 0 / 0.2); /* more subtle */
  }

  .publication-rail.is-tabs .pubrail-inner {
    padding-block: 0; /* remove top inset */
    border-top: 0; /* was 1px solid rgb(0 0 0 / .08);  */  /* optional hairline */
  }

  .publication-rail.is-tabs .publication-block .pubrail-inner .pubrail-scroller {
    align-items: stretch;  /* children can fill */
    height:var(--rail-h);  /* definite cross-size */
    gap: var(--rail-gap);  /* zero */
    padding: 0;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    border-top: 1px solid rgb(0 0 0 / 0.10);
    border-top: none;
  }

  /* Safari overlay hack in your base adds -2px bottom margin; neutralize for tabs */
  @supports (-webkit-touch-callout: none) {
    .publication-rail.is-tabs .pubrail-scroller {
      margin-bottom: 0;
    }
  }

  /* Tailwind adds mb-10 on rows; kill it here */
  .publication-rail .magazine-view-row {
    margin:0 !important;
  }

  /* Pass height through wrappers so <a> can be 100% tall */
  .publication-rail.is-tabs .magazine-view-row,
  .publication-rail.is-tabs .magazine-view-row > .views-field,
  .publication-rail.is-tabs .magazine-view-row > .views-field > .field-content {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  /* The clickable bar */
  .publication-rail.is-tabs .pubrail-scroller a.menu-item {
    position: relative;
    display: flex;                          /* beat earlier display */
    align-items: center;
    justify-content: center;
    height: 100%;                           /* fill lane */
    padding: 0 30px;
    border-radius: 0;
    box-sizing: border-box;
    background: transparent;
    color: var(--basin);
    font-weight: 500;
    text-align:center;
    letter-spacing: var(--rail-letter-space);
    white-space:normal;
    overflow:hidden;
    max-width:calc(var(--rail-ch) * 1ch);

    transition:
      color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out,
      background-color 0.15s ease-in-out;
  }


  /* helpers */
  :root {
    /* border-lines—default */
    --coffee: rgb(var(--coffee-rgb)); /* Coffee */
    --state-hover:  rgb(var(--tulane-blue-rgb));  /* Tulane Blue */
    --state-active: rgb(var(--tulane-green-rgb)); /* Tulane Green */
  }

  /* tabs scope */
  .publication-rail.is-tabs {
    --rule-hover:  var(--state-hover);
    --rule-active: var(--state-active);

    /* deterministic mixes (sum to 100%) */
    --divider-base:   color-mix(in srgb, var(--coffee) 34.5%, transparent 65.5%);
    --divider-hover:  color-mix(in srgb, var(--coffee) 15%,   var(--state-hover) 40%);
    --divider-active: color-mix(in srgb, var(--coffee) 15%,   var(--state-active) 45%);
  }

  /* fallback if color-mix() missing */
  @supports not (color: color-mix(in srgb, red 50%, white 50%)) {
    .publication-rail.is-tabs {
      --divider-base:   rgb(var(--coffee-rgb) / .345);
      --divider-hover:  rgb(var(--coffee-rgb) / .5);
      --divider-active: rgb(var(--coffee-rgb) / .675);
    }
  }

  /* base divider — every item except the last */
  .publication-rail.is-tabs .pubrail-scroller
  .magazine-view-row:not(:last-child) a.menu-item::after {
    content: "";
    position: absolute;

    /* sets line height: */
    top: 16px; bottom: 16px;

    /* put the divider at the OUTER edge of the link and bridge any gap */
    right: 0;
    width: 1px;
    background-color: var(--divider-base);
    pointer-events: none;
    transition:
      background-color .15s ease-in-out;
  }

  /* clamp only inner text */
  .publication-rail.is-tabs .pubrail-scroller a.menu-item > .label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rail-lines);
    line-clamp: var(--rail-lines);
    overflow: hidden;
    line-height: var(--rail-line);
    text-wrap: balance;
    padding-top: 3.5px; /* your micro-nudge */
  }

  /*——————— Hover/Active Cues ————————*/
  /* top rule + color on hover/active */
  .publication-rail.is-tabs .pubrail-scroller a.menu-item:hover {
    color: var(--bayou);
    /* hover color cue set atop of link on top menu container */
    box-shadow: inset 0 4px 0 0 var(--rule-hover);
  }

  /* slight tulane-blue text shadow on hover to match hover——top rule coloe */
 /* .publication-rail.is-tabs .pubrail-scroller a.menu-item:hover > .label {
    text-shadow:
      -0.7px 0.7px 0 white,
      -1.2px 1.2px 0 var(--tulane-blue);
  } */

  .publication-rail.is-tabs .pubrail-scroller a.menu-item.active {
    font-weight: 700;
    color: var(--tulane-green);
    /* active color cue set atop of link on top menu container */
    box-shadow: inset 0 4px 0 0 var(--rule-active);
  }

  /* slight green text shadow on hover to match active——top rule color */
 /* .publication-rail.is-tabs .pubrail-scroller a.menu-item.active > .label {
    text-shadow:
      -0.7px 0.7px 0 white,
      -1.2px 1.2px 0 rgb(var(--streetcar-rgb) / .65);
  } */

  /*——————— Menu-item Borders ————————*/
  /* own RIGHT divider tints on hover/active */
  .publication-rail.is-tabs .pubrail-scroller .magazine-view-row:not(:last-child) a.menu-item:hover::after {
    background-color: var(--divider-hover);
    background-color: var(--street-tile);
    background-color: var(--tulane-blue); /* override */
  }

  .publication-rail.is-tabs .pubrail-scroller .magazine-view-row:not(:last-child) a.menu-item.active::after {
    background-color: var(--divider-active);
    background-color: rgb(var(--streetcar-rgb) / 0.8); /* override */
  }


  /*——————— Fallback for :has ————————*/
  /* neighbor rules (left divider) — use :has(); active comes AFTER hover so active wins */
  @supports selector(.x:has(+ .y)){
    /* left of hovered (previous row’s divider) */
    .publication-rail.is-tabs .pubrail-scroller .magazine-view-row:has(+ .magazine-view-row a.menu-item:hover) a.menu-item::after {
      background-color: var(--divider-hover);
      background-color: var(--tulane-blue); /* override */
    }

    /* left of active/current (previous row’s divider) — ACTIVE WINS */
    .publication-rail.is-tabs .pubrail-scroller .magazine-view-row:has(+ .magazine-view-row a.menu-item.active) a.menu-item::after {
      background-color: var(--divider-active);
      background-color: rgb(var(--streetcar-rgb) / 0.8); /* override */
    }

    /* when next is hovered, the active row keeps its own right divider green */
    .publication-rail.is-tabs .pubrail-scroller .magazine-view-row:has(+ .magazine-view-row a.menu-item:hover) a.menu-item.active::after {
      background-color: var(--divider-active);
      background-color: rgb(var(--streetcar-rgb) / 0.8); /* override */
    }
  }



/* optional: light dividers between items for rhythm
  .publication-rail.is-tabs .pubrail-scroller a.menu-item{
    box-shadow: inset 1px 0 0 rgb(0 0 0 / .06);
  }
  .publication-rail.is-tabs .pubrail-scroller a.menu-item:not(.active):first-child {
    box-shadow: none;
  }*/


  /* If you want long labels to wrap to 2 lines in tabs, swap these lines in: */
  /*
  .publication-rail.is-tabs .pubrail-scroller .magazine-view-row .menu-item {
    white-space: normal;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    height: auto;
    line-height: 1.2;
    -webkit-line-clamp: 2; line-clamp: 2;
    display: -webkit-box; -webkit-box-orient: vertical;
  }
  */



  /* Fade visibility */
  .publication-rail.has-left  .pubrail-inner::before { opacity: 1; }
  .publication-rail.has-right .pubrail-inner::after  { opacity: 1; }

  /* Ensure fades never block clicks/focus */
  .publication-rail .pubrail-inner::before,
  .publication-rail .pubrail-inner::after { pointer-events: none; }

  /* Keep a visible focus */
  .publication-rail .pubrail-scroller .menu-item:focus-visible {
    border-radius: 0;
    outline: 3.5px solid var(--tulane-blue);
    outline-offset: 3.5px;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .publication-rail .pubrail-scroller {
      scroll-behavior: auto;
    }
  }

  /* Progressive width bumps (desktop only): increase clamp width as viewport grows */
  @media (min-width: 1200px) {
    .publication-rail {
      --rail-ch: 16;
    }
  }

  @media (min-width: 1360px) {
    .publication-rail {
      --rail-ch: 17;
    }
  }

  @media (min-width: 1600px) {
    .publication-rail {
      --rail-ch: 18;
    }
  }
}