/* =============================================================================
   Reasonics website - shared base
   Copyright (C) 2026 Reasonics, Inc. All rights reserved.

   Design tokens, document defaults and the nav/footer rules, lifted from the
   exported pages where they were repeated in all eighteen. Page-specific CSS
   stays with its page: ten selectors mean different things on different pages
   (the fold chevron alone has four definitions), so merging everything into
   one sheet would silently change how several pages look.
   ============================================================================= */

  :root {
    --color-ink: #1a2a4a;
    --color-ink-deep: #0f1d36;
    --color-teal: #0d9b8a;
    --color-motion: #19c9b3;
    --color-mist: #9fe6db;
    --color-slate: #5b6b86;
    --color-paper: #ffffff;
    --color-frost: #f4f6f9;
    --color-mint: #eaf7f4;
    --color-amber: #b5730b;
        --color-line-soft: rgba(26,42,74,0.10);
    --color-line: rgba(26,42,74,0.16);
    --logo-primary: var(--color-ink);
    --logo-accent: var(--color-motion);
    --logo-bg: transparent;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .rx-logo-compact { display: none; }
  .rx-navdd summary { list-style: none; cursor: pointer; }
  .rx-navdd summary::-webkit-details-marker { display: none; }
  @media (max-width: 1300px) and (min-width: 881px) {
    .rx-nav-links { gap: 16px !important; }
  }
  @media (max-width: 880px) {
    .rx-nav-links { display: none !important; }
    .rx-logo-full { display: none !important; }
    .rx-logo-compact { display: block !important; }
    .rx-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
    .rx-3col { grid-template-columns: 1fr !important; }
    .rx-tiles { grid-template-columns: 1fr !important; }
    .rx-footer-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
    .rx-footer-bottom { flex-direction: column !important; gap: 14px !important; align-items: flex-start !important; }
    .rx-nav-cta-label-long { display: none !important; }
    .rx-nav-cta-label-short { display: inline !important; }

    /* A grid or flex item's automatic minimum size is its MIN-CONTENT width,
       not zero. So "grid-template-columns: 1fr" is really "minmax(auto, 1fr)",
       and a long heading inside it can push the track wider than the container
       that is supposed to bound it. Collapsing a grid to one column on mobile
       therefore does not, on its own, make it fit: .rx-hero-grid was already
       collapsed by the rule above and still measured a 418px track inside a
       295px box, putting 84px of the home page off the side of the phone.

       These pages carry their layout as INLINE styles, so most of the offending
       grids have no class to aim at -- hence the attribute selectors. Setting
       min-width:0 on grid and flex children is the standard remedy and is safe:
       it restores the behaviour people expect from a shrinkable box, and
       anything that genuinely must not shrink sets its own min-width. */
    .rx-hero-grid > *, .rx-3col > *, .rx-tiles > *, .rx-footer-grid > * { min-width: 0; }
    [style*="display:grid"]  > *, [style*="display: grid"]  > *,
    [style*="display:flex"]  > *, [style*="display: flex"]  > * { min-width: 0; }

    /* Headings are sized in px inline on every page -- the home hero is 60px --
       and a 60px "Organizational" measures 436px against a 295px column. No
       amount of container fixing helps: the WORD does not fit. Left alone it
       pushed the page sideways; with break-word it hyphenated into
       "Organizat / ional", which is worse than the overflow it cured.

       So headings get a viewport-relative size on small screens. !important is
       required because the sizes are inline, and editing eighteen pages to
       chase this would leave the next page to be added carrying the same bug.
       At 375px the h1 lands near 32px, where the longest word measures ~232px
       and fits the column with room to spare. */
    h1 { font-size: clamp(28px, 8.5vw, 40px) !important; line-height: 1.15 !important; }
    h2 { font-size: clamp(22px, 6.2vw, 30px) !important; line-height: 1.22 !important; }
    h3 { font-size: clamp(18px, 5vw, 23px) !important; }

    /* Long unbroken tokens -- URLs, CLIF identifiers, package names -- have a
       min-content width of the whole token, which reintroduces the same
       overflow that min-width:0 just removed. Body text only: with the sizes
       above, headings no longer need it, and on a heading it is the rule that
       produces mid-word breaks. */
    p, li, td, th, dd, dt { overflow-wrap: break-word; }
  }
  .rx-nav-cta-label-short { display: none; }


/* ===== disclosure + single-select widgets =====
   These replace a client-side template runtime. <details> gives the disclosure
   behaviour natively, so it works with scripts disabled and a crawler reads the
   panel whether or not it is open. The single-select widgets keep every pane in
   the markup and hide all but one, for the same reason. */

.rx-disc > summary { list-style: none; cursor: pointer; }
.rx-disc > summary::-webkit-details-marker { display: none; }
.rx-disc-chev { transition: transform .15s ease; }
.rx-disc[open] .rx-disc-chev { transform: rotate(180deg); }

[data-rx-role] {
  border: 1.5px solid transparent;
  background: var(--color-paper);
  color: var(--color-slate);
  font-weight: 500;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
[data-rx-role]:hover { background: var(--color-frost); color: var(--color-ink); }
[data-rx-role][aria-selected="true"] {
  border-color: var(--color-teal);
  background: var(--color-mint);
  color: var(--color-ink);
  font-weight: 600;
}
[data-rx-role-panel][hidden] { display: none; }