/* =============================================================================
   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; }

  /* The open dropdown is positioned against the nav, so the nav has to be the
     containing block. Also the anchor for the mobile panel below. */
  header > nav { position: relative; }

  /* ===== mobile menu button =====
     Hidden on desktop, where the link row is visible. */
  .rx-navtoggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;          /* a real touch target, not a 24px icon */
    background: transparent;
    border: 1px solid rgba(26,42,74,0.16);
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rx-navtoggle-bars { display: block; width: 20px; }
  .rx-navtoggle-bars > span {
    display: block; height: 2px; border-radius: 1px;
    background: var(--color-ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  .rx-navtoggle-bars > span + span { margin-top: 4px; }
  .rx-navtoggle[aria-expanded="true"] .rx-navtoggle-bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .rx-navtoggle[aria-expanded="true"] .rx-navtoggle-bars > span:nth-child(2) { opacity: 0; }
  .rx-navtoggle[aria-expanded="true"] .rx-navtoggle-bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 1300px) and (min-width: 881px) {
    .rx-nav-links { gap: 16px !important; }
  }

  /* Four cards need a stop between "four across" and "one per row": at ~900px
     four 1fr tracks are about 200px each, too narrow for the copy. Two-by-two
     in between. Below 880px .rx-3col already collapses these to one column,
     and the card carries both classes. */
  @media (max-width: 1120px) and (min-width: 881px) {
    .rx-4col { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 880px) {
    /* The row is still hidden by default -- but there is a button to open it
       now, and .is-open drops it down as a stacked panel. Before, this rule was
       the whole story and the navigation simply ceased to exist on a phone. */
    .rx-nav-links { display: none !important; }
    .rx-navtoggle { display: inline-flex; }

    /* Adding a 44px button to the header put the row over the viewport: 40px of
       padding each side plus 24px gaps left the CTA 4px short of fitting. The
       nav carries those inline, hence !important. */
    header > nav { padding: 0 16px !important; gap: 12px !important; }
    header > nav > a[href*="contact"] { padding: 11px 14px !important; font-size: 13px !important; }

    /* !important throughout: the row carries display/align-items/gap/
       justify-content INLINE for the desktop layout, and an inline declaration
       beats any class selector. Without it the panel opened with the desktop's
       align-items:center and gap:38px still in force -- links centred and
       spaced 144px apart down a column. The measurements said fourteen links
       reachable and zero overflow, and they were true; only the screenshot
       showed it. */
    .rx-nav-links.is-open {
      display: flex !important;
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      gap: 2px !important;
      padding: 10px 24px 22px;
      background: var(--color-paper);
      border-bottom: 1px solid rgba(26,42,74,0.12);
      box-shadow: 0 16px 30px rgba(26,42,74,0.10);
      max-height: calc(100vh - 84px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .rx-nav-links.is-open > a {
      padding: 12px 2px !important;
      font-size: 16px !important;
      text-align: left;
      border-bottom: 1px solid rgba(26,42,74,0.07);
    }
    .rx-nav-links.is-open > .rx-navdd { border-bottom: 1px solid rgba(26,42,74,0.07); }
    .rx-nav-links.is-open > .rx-navdd:last-child { border-bottom: 0; }

    /* Inside the panel the dropdowns are just sections: no floating card, no
       absolute positioning, or they would hang off the side of the phone. */
    /* The <details> also carries inline display:flex; align-items:center for
       the desktop row, so it needs the same treatment. */
    .rx-nav-links.is-open .rx-navdd { display: block !important; }
    .rx-nav-links.is-open .rx-navdd > summary { padding: 12px 2px; font-size: 16px; justify-content: flex-start; }
    .rx-nav-links.is-open .rx-navdd > div {
      position: static !important;
      margin-top: 0 !important;
      min-width: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 0 6px 14px !important;
      background: transparent !important;
    }
    .rx-nav-links.is-open .rx-navdd > div > a { white-space: normal !important; padding: 10px 12px !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. */

/* ===== hover states =====
   These were authored as style-hover="..." attributes, which the retired
   client-side template runtime read and applied on mouseover. It is not an HTML
   attribute: browsers ignore it silently, so after that runtime was removed
   thirty links -- every nav dropdown item, every footer link and three on the
   home page -- had no hover feedback at all, and nothing reported it. There is
   no such thing as an invalid attribute for a browser to complain about.

   Real CSS now, with the transitions the inline version could never express. */
.rx-hov-menu { transition: background .12s ease, color .12s ease; }
.rx-hov-menu:hover { color: var(--color-ink); background: var(--color-frost); }
.rx-hov-ink  { transition: color .12s ease; }
.rx-hov-ink:hover  { color: var(--color-ink); }
.rx-hov-teal { transition: color .12s ease; }
.rx-hov-teal:hover { color: var(--color-teal); }

.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; }

/* ===== prover portfolio widget =====
   The selected state was inline in the old snapshot, recomputed by the template
   runtime on every render. It is CSS now so the markup carries one style per
   button and the state lives in aria-selected, which is also what a screen
   reader reads. */
.rx-prover [data-rx-stmt] {
  background: var(--color-paper);
  border: 1.5px solid rgba(26,42,74,0.16);
  color: var(--color-ink);
  transition: background .12s ease, border-color .12s ease;
}
.rx-prover [data-rx-stmt]:hover { border-color: var(--color-motion); }
.rx-prover [data-rx-stmt][aria-selected="true"] {
  background: var(--color-mint);
  border-color: var(--color-motion);
}
.rx-prover [data-rx-stmt-panel][hidden] { display: none; }
.rx-prover [data-rx-prove]:hover { background: var(--color-ink-deep); }

/* Stack the three statement buttons on a phone: three columns of this much
   text at 375px is unreadable. */
@media (max-width: 720px) {
  .rx-prover .rx-stmt-row { flex-direction: column; }
}