/* Shared site chrome (RIV-851).
   The homepage shipped on the v17 design system while 32 other pages stayed on the legacy
   Tailwind build, so selecting a nav tab changed the header from 72px to 65px, changed its
   markup and nav styling, and moved the content edge from 32px to 64px. This file is the one
   definition of the header, the footer and the page edge, and every page loads it.

   Tokens are prefixed --rv- and set on :root deliberately: rivvet.css defines its own --ink,
   --line and friends, and clobbering those would recolour every legacy page body. Nothing
   here styles page content; it is chrome and the shared page edge only. */

:root {
  --rv-page-max: 1680px;
  --rv-page-gutter: clamp(16px, 2.2vw, 36px);
  --rv-page-edge: max(var(--rv-page-gutter), calc((100vw - var(--rv-page-max)) / 2));
  --rv-mint: #00f0b5;
  --rv-ink: #072336;
  --rv-slate: #63747c;
  --rv-white: #ffffff;
  --rv-header-h: 72px;
  --rv-display: "Unbounded", "Arial Black", sans-serif;
  --rv-body: "IBM Plex Sans", system-ui, sans-serif;
}

/* assets/engine.js injects its capture modal and its sticky CTA carrying Tailwind's `hidden`
   class, and relies on that class to keep them out of sight. `.hidden` is defined in tw.css,
   which the v17 homepage no longer loads, so on that page the class meant nothing and the
   whole modal rendered inline and unstyled: "Let's set it up.", four bare inputs, a "Claim my
   setup" button and the success panel underneath it. engine.js is shared, so its own UI must
   not depend on a stylesheet that is not universal. chrome.css is. Verified no collision:
   nothing in the homepage's own markup uses this class, and neither landing.css nor
   chrome.css defines it. */
.hidden { display: none; }

/* One page edge everywhere. Legacy .container-r used 4rem at >=1024px, which is why the
   content jumped 32px sideways between the homepage and every other page. */
body .container-r {
  max-width: var(--rv-page-max);
  padding-left: var(--rv-page-edge);
  padding-right: var(--rv-page-edge);
}

.rv-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: var(--rv-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--rv-page-edge);
  /* Opaque on purpose. A 0.9-alpha background with backdrop-filter let the page show through
     the header, so during a smooth scroll the whole document streamed past behind the nav and
     the header appeared to move. Frames captured mid-scroll differed; with a solid background
     they are identical. The border and shadow still separate it from the page. */
  background: #ffffff;
  border-bottom: 1px solid rgba(7, 35, 54, 0.08);
  box-shadow: 0 12px 28px rgba(7, 35, 54, 0.045);
  font-family: var(--rv-body);
}

.rv-header .rv-brand { display: inline-flex; align-items: center; min-height: 44px; }
/* Sized by attribute in the markup as well, so the box exists before the file loads. */
.rv-lockup { display: block; width: 98px; height: 26px; }

.rv-nav { display: flex; align-items: center; gap: 26px; }

.rv-nav a {
  color: var(--rv-slate);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rv-nav a:hover,
.rv-nav a[aria-current="page"] { color: var(--rv-ink); }
.rv-nav a[aria-current="page"] { font-weight: 700; }

.rv-nav .rv-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--rv-ink);
  color: var(--rv-white);
  font-weight: 700;
  font-size: 13px;
  min-height: 44px;
  box-sizing: border-box;
}

.rv-nav .rv-cta:hover { background: #0a3049; color: var(--rv-white); }
.rv-cta-short { display: none; }

.rv-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 35, 54, 0.16);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.rv-menu-button span,
.rv-menu-button span::before,
.rv-menu-button span::after {
  content: "";
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--rv-ink);
  position: relative;
}

.rv-menu-button span::before { position: absolute; top: -6px; }
.rv-menu-button span::after { position: absolute; top: 6px; }

.rv-footer {
  padding: 44px var(--rv-page-edge);
  background: #050a14;
  color: rgba(253, 254, 253, 0.66);
  font-family: var(--rv-body);
  font-size: 14px;
  display: grid;
  gap: 20px;
}

.rv-footer a { color: rgba(253, 254, 253, 0.72); text-decoration: none; }
.rv-footer a:hover { color: var(--rv-white); }
.rv-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.rv-footer-brand .rv-lockup { width: 90px; height: 24px; }
.rv-footer-house { margin: 6px 0 0; color: var(--rv-mint); font-weight: 600; }
/* Footer links measured 21px tall against a 44px tap target. Padding, not font size, so the
   type scale is untouched. */
.rv-footer-nav { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.rv-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
/* 0.42 alpha computed to 4.01:1 on the footer ground, under the 4.5:1 small-text bar. */
.rv-footer-legal { color: rgba(253, 254, 253, 0.58); font-size: 13px; }

@media (max-width: 900px) {
  .rv-nav { display: none; }
  .rv-menu-button { display: inline-flex; }
  .rv-nav-open .rv-nav {
    display: flex;
    position: absolute;
    top: var(--rv-header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px var(--rv-page-edge) 20px;
    background: var(--rv-white);
    border-bottom: 1px solid rgba(7, 35, 54, 0.1);
    box-shadow: 0 18px 40px rgba(7, 35, 54, 0.12);
  }
  .rv-nav-open .rv-nav a { padding: 12px 0; font-size: 16px; min-height: 44px; display: flex; align-items: center; }
  .rv-nav-open .rv-nav .rv-cta { justify-content: center; margin-top: 8px; }
}

@media (max-width: 640px) {
  .rv-cta-full { display: none; }
  .rv-cta-short { display: inline; }
  .rv-footer-top { flex-direction: column; align-items: flex-start; }
}

/* Arm label beside the wordmark. Commerce is a separate arm with its own promise and its own
   pricing model; the shared chrome would otherwise make it look like the home-services site. */
.rv-arm {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(7, 35, 54, 0.18);
  font-family: var(--rv-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rv-slate);
}