/* ============================================================
   MVSD Core — Tabbed Sections paragraph (tabs / tab_item)
   A menu-analog tab strip: clicking a tab swaps the visible pane.
   The tabs look like folder/notebook tabs — rounded tops, slightly
   spaced, sitting ON TOP of the content card (which is the panel).
   The active tab is gold (echoes the masthead QUICK LINKS band).
   The whole component breaks out of the narrow prose column so the
   CONTENT uses the full page-content width.
   Progressive enhancement: with JS off, all panels render stacked.
   ============================================================ */

.para--tabs {
  margin: var(--space-8, 2rem) 0;
  /* Default: fill the containing column. This is correct wherever the tabs sit
     in a normal content column — e.g. the dept_article 25/75 layout, where the
     content column already sits beside the contact sidebar. (A hardcoded width
     here overflowed that grid column — the breakout below is scoped instead.) */
}

/* `page` nodes render the body in a NARROW prose column (`.page-body`,
   --max-width-narrow ≈ 800px, left-aligned inside the 1200px centered
   `.page-content`). Only there, break the tabs out to the full page-content
   width so the CONTENT isn't confined to the reading measure. Scoped to
   `.page-body` so it can't overflow the dept_article grid column. The
   page-content 1.5rem side padding absorbs the scrollbar delta on sub-1200
   viewports, so this never triggers horizontal page scroll. */
.page-body .para--tabs {
  /* Updated 2026-08-31. The comment above described the old reality: the body
     was left-aligned, so a fixed 1152px starting at its left edge happened to
     line up with `.page-content`. `.page-body` is now CENTRED when the page has
     no rail, so a fixed width anchored left would overhang the right edge by
     176px, and `body { overflow-x: clip }` would swallow it with no scrollbar
     to reveal it. Centre the breakout on its parent instead: the negative
     inline margin is symmetric, so it stays centred whatever the parent does. */
  --tabs-breakout: min(
    calc(var(--max-width, 1200px) - 2 * var(--space-6, 1.5rem)),
    calc(100vw - 2 * var(--space-6, 1.5rem))
  );
  /* max(100%, …) so the breakout can only ever make tabs WIDER than the
     column, never narrower. Below ~550px the viewport term drops under the
     body width, and without this the tabs would sit inset from their own
     prose. */
  width: max(100%, var(--tabs-breakout));
  margin-inline: calc((100% - max(100%, var(--tabs-breakout))) / 2);
}

/* With a rail the body sits in an ~812px track, so breaking out to the full
   page width would drive tabs straight through the sidebar. Stay in the track. */
.page-layout--rail-right .page-body .para--tabs {
  width: 100%;
  margin-inline: 0;
}

.para-tabs__heading {
  margin: 0 0 var(--space-4, 1rem);
}

/* Component wrapper — the panel below is the visual "card"; tabs sit on it. */
.para-tabs {
  position: relative;
}

/* Tab bar — compact "slashed" tabs that borrow the masthead / dept-nav MORE
   flair: angled parallelogram panels in the site green (inactive) + gold
   (active), uppercase like the masthead buttons, using the same --ql-slope
   diagonal. Distinct from a flat full-bleed menu bar — a row of individual
   angled panels sitting on the white content card. The colored shape lives on
   ::before so the button stays un-clipped and its focus ring isn't sliced off
   (the same reason the masthead puts its slash on .nav-translate::before). */
.para-tabs__bar {
  --slope: var(--ql-slope, 1.1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-left: var(--slope, 1.1rem);
  position: relative;
  z-index: 1;   /* tabs sit above the panel's top border */
}

.para-tabs__tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  isolation: isolate;
  z-index: 1;
  /* negative left margin overlaps the previous tab → fanned panels (later/right
     tabs paint on top). margin-bottom -1px tucks the row cleanly onto the card;
     the multi-row overlap + stacking is done in tabs.js (translateY + z-index)
     so the single-row / bottom-row card seam stays clean. */
  margin: 0 0 -1px calc(-0.55 * var(--slope, 1.1rem));
  padding: 0.4rem calc(0.72rem + var(--slope, 1.1rem) * 0.6);
  background: transparent;
  border: 0;
  color: var(--color-on-primary, #fff);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--ls-snug, 0.02em);
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  /* drop-shadow (NOT box-shadow) follows the clipped parallelogram, so the
     overlap reads as layered, stacked panels. */
  filter: drop-shadow(-2px 1px 1.5px rgba(0, 0, 0, 0.22));
  transition: color var(--transition-fast, 150ms ease);
}
.para-tabs__tab:first-child {
  margin-left: 0;
}
/* the angled colored panel */
.para-tabs__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  clip-path: polygon(var(--slope, 1.1rem) 0, 100% 0, calc(100% - var(--slope, 1.1rem)) 100%, 0 100%);
  transition: background var(--transition-fast, 150ms ease),
              filter var(--transition-fast, 150ms ease);
}
.para-tabs__tab:hover:not([aria-selected="true"])::before {
  filter: brightness(1.14);
}

/* Active tab — gold, raised to the TOP of the overlap stack, with the brand-
   green two-tone sliver peeking behind the gold (masthead / dept-nav MORE
   green-behind-gold). No margin/spacing changes on select — the layout is
   identical whichever tab is active (nothing shifts). */
.para-tabs__tab[aria-selected="true"] {
  color: var(--color-on-accent, #1a1a1a);
  z-index: 5;
  /* subtle — the gold + green bar already give it definition */
  filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.16));
}
.para-tabs__tab[aria-selected="true"]::before {
  background: var(--color-accent);
  z-index: -2;   /* gold sits below the inner green bar */
}
/* Brand-green accent bar kept INSIDE the tab, hugging its slanted left edge
   (the MORE two-tone contained within the gold — it no longer extends over the
   neighbour, so the left tab isn't clipped and the overlap seam is left alone). */
.para-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--slope, 1.1rem) + 0.55rem);   /* slope + bar width */
  z-index: -1;
  background: var(--color-brand, #008544);
  clip-path: polygon(var(--slope, 1.1rem) 0, 100% 0, calc(100% - var(--slope, 1.1rem)) 100%, 0 100%);
}
.para-tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus-ring-on-dark, #ffbf47);
  outline-offset: 1px;
  border-radius: 3px;
}
/* dark ring reads better around the gold active tab */
.para-tabs__tab[aria-selected="true"]:focus-visible {
  outline-color: var(--color-focus-ring, #b45309);
}

/* Multi-row "notebook" stacking (desktop): tabs.js adds .is-multirow and, per
   wrapped row, staggers right (translateX), drops upper rows down onto the
   anchored bottom row (translateY), and sets z-index so each LOWER row sits
   permanently in front (like physical notebook tabs). */
.para-tabs__bar.is-multirow .para-tabs__tab {
  /* left shadow = the within-row fan; UPWARD shadow = the row seam — the front
     (lower) row casting onto the row behind/above it. */
  filter: drop-shadow(-2px 0 1.5px rgba(0, 0, 0, 0.20))
          drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.32));
}
/* A thin light top edge gives a crisp seam where the front row overlaps the
   row behind it (a subtle "card edge" line). */
.para-tabs__bar.is-multirow .para-tabs__tab:not([aria-selected="true"])::before {
  background: linear-gradient(rgba(255, 255, 255, 0.28) 0 1.5px, var(--color-primary) 1.5px);
}
.para-tabs__bar.is-multirow .para-tabs__tab[aria-selected="true"]::before {
  background: linear-gradient(rgba(255, 255, 255, 0.45) 0 1.5px, var(--color-accent) 1.5px);
}

/* Panels — the content card the tabs sit on. Full width of the component. */
.para-tabs__panels {
  position: relative;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
  padding: var(--space-6, 1.5rem);
}
.para-tabs__panel:focus-visible {
  outline: 2px solid var(--color-focus-ring, #b45309);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 4px);
}
.para-tabs__panel > :first-child { margin-top: 0; }
.para-tabs__panel > :last-child { margin-bottom: 0; }

/* Subtle fade when a panel becomes active (JS toggles [hidden]). */
@media (prefers-reduced-motion: no-preference) {
  html.js .para-tabs[data-tabs-ready] .para-tabs__panel:not([hidden]) {
    animation: mvsd-tab-fade var(--transition-base, 250ms ease);
  }
}
@keyframes mvsd-tab-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile dropdown (menu analog) — sits above the card and mirrors the
   department-nav mobile toggle: brand-green control, white label, custom
   chevron, rounded. `appearance: none` + `box-sizing` + right padding for the
   chevron keeps the label from colliding with the arrow (no overflow). */
.para-tabs__select-wrap {
  display: none;
  margin-bottom: var(--space-4, 1rem);
}
.para-tabs__select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--ls-snug, 0.02em);
  color: #fff;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* chevron — same glyph as the dept-nav toggle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  transition: background-color var(--transition-fast, 150ms ease);
}
.para-tabs__select:hover {
  background-color: var(--color-primary-dark, #002b12);
}
.para-tabs__select:focus-visible {
  outline: 2px solid var(--color-focus-ring-on-dark, #ffbf47);
  outline-offset: 2px;
}
/* the native option list is OS-rendered; keep its text readable */
.para-tabs__select option {
  color: var(--color-text, #1a1a1a);
  background: #fff;
}

/* Progressive enhancement — hide inactive panels ONLY when JS is on.
   `data-tabs-ready` flips from "hide all but the first" (pre-init, avoids a
   flash of every panel) to "obey [hidden]". With JS off, `html` has no `.js`
   class, so all panels stay visible & reachable. */
.para-tabs__panel[hidden] { display: none; }
html.js [data-para-tabs]:not([data-tabs-ready]) .para-tabs__panel:not(:first-child) {
  display: none;
}

/* Chevron on the mobile disclosure header — hidden on desktop. */
.para-tabs__chev { display: none; }

/* ── Mobile: the tab bar becomes a disclosure MENU attached to the content
   card. Collapsed = only the active tab (gold, with a chevron) sitting ON the
   card; tap it to drop the full tab list; tap a tab to switch + close. Keeps
   the tab green/gold + a hint of the slash — distinct from the dept-nav menu,
   and the body stays the exact width of the selected bar. ── */
@media (max-width: 640px) {
  .para-tabs__select-wrap { display: none; }   /* replaced by the button menu */

  .para-tabs__bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;                                /* brand-green spacer shows between tabs */
    padding-left: 0;
    background: var(--color-brand, #008544);
    position: relative;
    z-index: 2;
  }
  .para-tabs__tab {
    width: 100%;
    margin: 0;
    padding: 0.8rem 2.6rem 0.8rem 1.1rem;    /* right room for the chevron */
    text-align: left;
    filter: none;                            /* drop the desktop overlap shadow */
  }
  /* solid bars on mobile — no empty slash edge */
  .para-tabs__tab::before {
    clip-path: none;
  }
  /* Collapsed: show only the active tab (the current selection). */
  .para-tabs__bar:not(.is-open) .para-tabs__tab:not([aria-selected="true"]) {
    display: none;
  }
  /* Active tab = the header: a plain solid GOLD bar on the card. The brand
     green shows only as the spacer BETWEEN tabs (bar background + gap). */
  .para-tabs__tab[aria-selected="true"] { z-index: 3; }
  .para-tabs__tab[aria-selected="true"]::before { background: var(--color-accent); }
  .para-tabs__tab[aria-selected="true"]::after { content: none; }   /* no slash */
  /* Inactive items (revealed when open): a solid green bar. */
  .para-tabs__tab:not([aria-selected="true"])::before { background: var(--color-primary); }
  .para-tabs__tab:not([aria-selected="true"]):hover::before { filter: brightness(1.12); }

  /* Chevron — shown only on the active header; flips when the menu is open. */
  .para-tabs__tab[aria-selected="true"] .para-tabs__chev {
    display: block;
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: 0.85rem;
    height: 0.55rem;
    transform: translateY(-50%);
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E");
    transition: transform var(--transition-fast, 150ms ease);
  }
  .para-tabs__bar.is-open .para-tabs__tab[aria-selected="true"] .para-tabs__chev {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Attach the menu to the card: square the shared edge so there's no gap. */
  .para-tabs__panels {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}