/* ==========================================================================
   JAT SITEWIDE CSS — 03-design-system-page.css
   Internal JAT Design System page: token cards, documentation UI, copy button, status, sidebar, menu, code

   Loaded right after Elementor's Site Settings CSS (see child functions.php),
   in file-name order 01 → 07. Keep blocks in order; add new blocks at the end
   of the relevant file under a "JAT — …" banner comment.
   ========================================================================== */

/* =========================================================
   DESIGN SYSTEM — TOKEN CARD
   ========================================================= */

/*
   Apply ds-token-card to the outermost container inside
   the DS — Token Card Elementor Loop Item.

   Let Elementor / JAT Global Classes control:
   - padding
   - background
   - borders
   - radius
   - general spacing

   These rules handle card behavior.
*/

.ds-token-card {
  width: 100%;
  min-width: 0;
  height: 100%;

  overflow: hidden;
}


/* Prevent long CSS variable names and code from
   forcing Loop Grid columns wider than intended. */

.ds-token-card * {
  min-width: 0;
}


/* =========================================================
   DESIGN SYSTEM — DOCUMENTATION UI
   ========================================================= */

.ds-live-token {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--space-2);

  min-width: 0;
}


/* ---------------------------------------------------------
   COLOR SWATCH

   Automatically generated by [ds_live_token].
   Do not create manually in Elementor.
   --------------------------------------------------------- */

.ds-token-swatch {
  width: 3rem;
  height: 3rem;

  flex: 0 0 auto;

  border:
    1px solid var(--color-divider);

  border-radius: 0.5rem;
}


/* ---------------------------------------------------------
   SIZE PREVIEW

   Width is supplied dynamically:
   style="width:var(--space-4)"
   --------------------------------------------------------- */

.ds-token-size-preview {
  display: block;

  max-width: 100%;
  height: 0.75rem;

  flex: 0 0 auto;

  background:
    var(--color-brand-accent);

  border-radius: 999px;
}


/* ---------------------------------------------------------
   LIVE VALUES
   --------------------------------------------------------- */

.ds-live-value,
.ds-live-px {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 0.875rem;
  line-height: 1.5;

  overflow-wrap: anywhere;
  word-break: break-word;
}


.ds-live-value {
  color: var(--color-text-primary);
}


.ds-live-px {
  color: var(--color-text-muted);
}


/* =========================================================
   DESIGN SYSTEM — COPY BUTTON
   ========================================================= */

.ds-copy-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border:
    1px solid var(--color-divider);

  background:
    var(--color-background-primary);
  color:
    var(--color-text-primary);
    text-transform: uppercase;
  border-radius: 0.5rem;

  padding:
    0.5rem
    0.75rem;

  font: inherit;
  line-height: 1;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}


/* Hover */

.ds-copy-button:hover {
  border-color:
    var(--color-brand-accent);
}


/* Keyboard focus */

.ds-copy-button:focus-visible {
  outline:
    2px solid
    var(--color-brand-accent);

  outline-offset: 2px;
}


/* Successful copy state */

.ds-copy-button[data-copy-state="success"] {
  border-color:
    var(--color-brand-accent);
}


/* =========================================================
   DESIGN SYSTEM — STATUS
   ========================================================= */

.ds-status {
  display: inline-flex;
  align-items: center;

  gap: 0.5rem;

  width: fit-content;

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:
    var(--color-text-muted);

  white-space: nowrap;
}


/* ---------------------------------------------------------
   STATUS DOT
   --------------------------------------------------------- */

.ds-status::before {
  content: "";

  width: 0.5rem;
  height: 0.5rem;

  flex:
    0 0
    0.5rem;

  border-radius: 50%;

  background:
    currentColor;
}


/* CURRENT
   Approved source of truth
   -------------------------------- */

.ds-status[data-status="current"] {
  color: #27864A;
}


/* PLANNED
   Known direction / not built
   -------------------------------- */

.ds-status[data-status="planned"] {
  color: #3B6FC6;
}


/* VERIFY
   Needs confirmation
   -------------------------------- */

.ds-status[data-status="verify"] {
  color: #B7791F;
}


/* DEPRECATED
   Do not use for new work
   -------------------------------- */

.ds-status[data-status="deprecated"] {
  color: #9B3A3A;
}


/* Fallback */

.ds-status[data-status="default"] {
  color:
    var(--color-text-muted);
}


/* =========================================================
   JAT DESIGN SYSTEM — PAGE SHELL
   ========================================================= */

/*
   ds-page
   Apply to the outermost Elementor container that contains:
   1. ds-sidebar
   2. Main Design System content column
*/

.ds-page {
  width: 100%;
  min-width: 0;

  /* Important for sticky sidebar behavior */
  align-items: stretch;

  /* Sticky can fail when an ancestor clips overflow */
  overflow: visible;
}


/* =========================================================
   JAT DESIGN SYSTEM — SIDEBAR
   ========================================================= */

/*
   ds-sidebar
   Apply to the sidebar container itself.

   Recommended Elementor settings:
   - Align Self: Start
   - Grow: 0
   - Shrink: 0
   - Overflow: Visible / Default
*/

.ds-sidebar {
  position: sticky !important;

  top: calc(
    var(--navbar-height-desktop)
    + var(--space-2)
  );

  align-self: flex-start;

  width: 100%;
  min-width: 0;

  height: fit-content;

  max-height: calc(
    100vh
    - var(--navbar-height-desktop)
    - var(--space-4)
  );

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  z-index: 10;
}


/* Optional cleaner sidebar scrollbar */

.ds-sidebar {
  scrollbar-width: thin;
}


/* =========================================================
   JAT DESIGN SYSTEM — WORDPRESS MENU
   ========================================================= */

/*
   ds-nav
   Apply directly to the WordPress Menu widget.
*/

.ds-nav {
  width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------------
   MENU LIST
   --------------------------------------------------------- */

.ds-nav ul {
  display: flex;
  flex-direction: column;

  gap: var(--space-1);

  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* ---------------------------------------------------------
   NESTED MENU
   --------------------------------------------------------- */

.ds-nav ul ul {
  gap: 0.25rem;

  margin-top: 0.25rem;

  padding-left: var(--space-2);
}


/* ---------------------------------------------------------
   MENU ITEMS
   --------------------------------------------------------- */

.ds-nav li {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   MENU LINKS
   --------------------------------------------------------- */

.ds-nav a {
  display: flex;
  align-items: center;

  width: 100%;

  min-width: 0;

  color: var(--color-text-muted);

  text-decoration: none;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}


/* Hover */

.ds-nav a:hover {
  color: var(--color-text-primary);
}


/* Current / active WordPress menu item */

.ds-nav .current-menu-item > a,
.ds-nav .current-menu-ancestor > a {
  color: var(--color-text-primary);
}


/* Keyboard accessibility */

.ds-nav a:focus-visible {
  outline:
    2px solid
    var(--color-brand-accent);

  outline-offset: 3px;

  border-radius: 0.25rem;
}


/* =========================================================
   DESIGN SYSTEM — RESPONSIVE SIDEBAR
   ========================================================= */

/*
   Keep sticky behavior on desktop/tablet landscape.

   On mobile, return sidebar to normal document flow.
*/

@media (max-width: 767px) {

  .ds-page {
    overflow: visible;
  }


  .ds-sidebar {
    position: static !important;

    top: auto;

    align-self: stretch;

    height: auto;
    max-height: none;

    overflow: visible;

    scrollbar-gutter: auto;
  }

}


/* =========================================================
   DESIGN SYSTEM — CODE
   ========================================================= */

/*
   Use ds-code on:
   - CSS variable names
   - class names
   - snippets
   - code/reference blocks

   For large code blocks, apply this to the outer container.
*/

.ds-code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 0.875rem;
  line-height: 1.6;

  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Large code containers */

div.ds-code,
pre.ds-code {
  overflow-x: auto;
  padding:
    var(--space-3);
  border:
    1px solid
    var(--color-divider-inverse);
  border-radius:
    0.75rem;
  background:
    var(--color-background-dark);
  color:
    var(--color-text-inverse);
  white-space:
    pre-wrap;
  tab-size: 2;
}