/* Product page styles (ui/landing/index.template.html → ui/public/<lang>/index.html).
   Not part of the exported design-system file (shared.css); kept in one cacheable
   file so the nine language versions of the page share it. */

html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }
/* Japanese has no spaces between words; break lines at phrase boundaries where supported. */
:lang(ja) { word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Screenshots open full-resolution in a glass-pane lightbox on click. */
img[data-lightbox] { cursor: zoom-in; }

/* Feature sections are two columns inline; stack them on phones, text first. */
@media (max-width: 720px) {
  .feature { grid-template-columns: 1fr !important; }
  .feature > .blueprint { order: 1 !important; }
}

/* — header nav — */
/* Logo, then the diagram-types menu and Roadmap, then "Get started" and the
   language chooser. Menus keep the header the same width in every language.
   On narrow screens the links drop to their own row, so the actions never
   overflow next to long translations. */
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 20px 0; }
.site-nav-links { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2vw, 24px); font-size: 14px; }
.site-nav-actions { flex: none; display: flex; align-items: center; gap: 12px; }
@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap; row-gap: 12px; }
  .site-nav-actions { margin-left: auto; }
  .site-nav-links { order: 1; flex-basis: 100%; justify-content: flex-start; }
  /* Triggers sit at the left edge here, so their lists open rightwards. */
  .site-nav-links .nav-menu-list { left: 0; right: auto; }
}

/* — header drop-down menus — */
/* <details> disclosures of plain links; /nav-menu.js adds hover, Escape and
   outside-tap behaviour (see its header comment). */
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu-chevron { transition: transform 0.15s; }
.nav-menu[open] .nav-menu-chevron { transform: rotate(180deg); }
.nav-menu-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font-size: 14px; }
.nav-menu-trigger:hover, .nav-menu[open] > .nav-menu-trigger { color: var(--color-accent); }
.nav-menu-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 180px; max-width: calc(100vw - 32px);
  margin: 0; padding: 6px 0; list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
/* Bridges the gap above the list so moving the mouse into it keeps it open. */
.nav-menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-menu-list a {
  display: block; padding: 8px 14px; white-space: nowrap;
  font-size: 14px; color: inherit; text-decoration: none;
}
.nav-menu-list a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nav-menu-list a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }

/* The language trigger shows the full name, or only the code on phones.
   Both are aria-hidden; screen readers read the trigger's .visually-hidden label. */
.lang-menu-code { display: none; }
@media (max-width: 720px) {
  .lang-menu-name { display: none; }
  .lang-menu-code { display: inline; }
}

/* — lightbox — */
.lightbox-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.lightbox-backdrop.open { display: flex; }
.lightbox-backdrop img {
  display: block; max-width: 100%; max-height: 100%;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 22px; line-height: 1;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
}
.lightbox-close:hover { background: var(--color-surface); }