/*!
 * legal-version-tabs.css — PROJECT HAND-WRITTEN FILE (companion of legal-version-tabs.js).
 * NOT mirrored Elementor / WP CSS — do NOT delete in vendor cleanup passes
 * (same keep-rule as fix.css / shrink.js in this directory).
 *
 * Generic horizontal version tabs for legal documents + archived-version notice.
 * Selected-state color piggybacks on the UiCore theme variable
 * --uicore-primary-color (brand blue #27B0FD) so a future brand change propagates.
 */

.legal-version-tabs {
  display: flex;
  flex-wrap: wrap; /* mobile: tabs may wrap to a second row */
  gap: 4px;
  margin: 0 0 28px;
  border-bottom: 2px solid rgba(127, 127, 127, 0.25);
}

.legal-version-tabs [role="tab"] {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px; /* selected underline overlays the tablist rule */
  padding: 12px 18px;
  min-height: 44px; /* comfortable touch target on mobile */
  font: inherit;
  font-weight: 600;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
}

.legal-version-tabs [role="tab"]:hover,
.legal-version-tabs [role="tab"]:focus-visible {
  opacity: 1;
}

.legal-version-tabs [role="tab"][aria-selected="true"] {
  color: var(--uicore-primary-color, #27b0fd);
  border-bottom-color: var(--uicore-primary-color, #27b0fd);
  opacity: 1;
}

.legal-version-tabs__date {
  font-weight: 400;
  white-space: nowrap;
}

/* component tokens (coding.md §2.1 — define first, then use; no site-wide token
   covers the notice palette, so they live here with the component) */
:root {
  --legal-notice-bg: #fff8e1;
  --legal-notice-border: #f0dc9b;
  --legal-notice-text: #6b5a1e;
}

/* Archived-version notice bar (pale yellow, shown atop archived panels) */
.legal-archive-notice {
  background: var(--legal-notice-bg);
  border: 1px solid var(--legal-notice-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 24px;
  color: var(--legal-notice-text);
}

.legal-archive-notice a {
  font-weight: 600;
  text-decoration: underline;
}