/* ---------------------------------------------------------------------------
   Lev Developments — shared UI layer

   Loaded AFTER styles.css on every page, and after brand-hero.css on the home
   page, so everything here is an intentional override. Keeping it in its own
   file means the button and navigation treatment can be revised without
   reopening the 36 KB base stylesheet.

   Three jobs:
     1. Buttons that match the vendor onboarding portal — raised frosted glass
        with a shimmer pass, so the marketing site and the portal feel like one
        product rather than two.
     2. Primary navigation as clear glass tiles.
     3. Footer legal row, admin door, and the site version stamp.
   --------------------------------------------------------------------------- */

/* ---- 1. Buttons ---------------------------------------------------------- */

/* Lit from above, seated on a hard bottom edge that compresses when pressed.
   The vertical gradient does the doming; the stacked shadow does the lift. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(1,15,40,0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.12) 52%, rgba(255,255,255,0.06));
  backdrop-filter: blur(38px) saturate(135%);
  -webkit-backdrop-filter: blur(38px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 4px rgba(1,15,40,0.3),
    0 4px 0 rgba(1,15,40,0.3),
    0 9px 18px rgba(1,15,40,0.42);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2) 52%, rgba(255,255,255,0.1));
  border-color: var(--line);
  border-top-color: rgba(255,255,255,0.6);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 4px rgba(1,15,40,0.28),
    0 5px 0 rgba(1,15,40,0.3),
    0 12px 22px rgba(1,15,40,0.45);
}
.btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(1,15,40,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 1px 0 rgba(1,15,40,0.3),
    0 2px 6px rgba(1,15,40,0.35);
}

.btn--solid {
  color: var(--navy-deep);
  border-color: rgba(255,255,255,0.92);
  border-top-color: #fff;
  border-bottom-color: rgba(1,23,58,0.3);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0.78));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 4px rgba(1,23,58,0.16),
    0 4px 0 rgba(1,23,58,0.34),
    0 9px 18px rgba(1,15,40,0.42);
}
.btn--solid:hover {
  background: linear-gradient(180deg, #fff, #fff 55%, rgba(255,255,255,0.88));
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 4px rgba(1,23,58,0.14),
    0 5px 0 rgba(1,23,58,0.34),
    0 12px 22px rgba(1,15,40,0.45);
}
.btn--solid:active {
  box-shadow:
    inset 0 2px 5px rgba(1,23,58,0.28),
    0 1px 0 rgba(1,23,58,0.3),
    0 2px 6px rgba(1,15,40,0.35);
}

/* Shimmer: one pass across the face on a 1.5s cycle, same as the portal. */
@keyframes lv-shimmer {
  0%        { transform: translateX(-160%) skewX(-18deg); }
  40%, 100% { transform: translateX(320%)  skewX(-18deg); }
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 42%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  animation: lv-shimmer 1.5s linear infinite;
}
.btn--solid::after {
  background: linear-gradient(100deg, rgba(1,23,58,0), rgba(1,23,58,0.16), rgba(1,23,58,0));
}

/* The "coming soon" style disabled pill shouldn't wink at people. */
.btn[disabled]::after,
.btn[aria-disabled="true"]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}

/* Older Safari/Firefox without backdrop-filter: flat opaque panels instead of a
   thin blue tint that reads as a rendering fault. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn { background: linear-gradient(180deg, rgba(226,235,250,0.26), rgba(226,235,250,0.14)); }
}

/* ---- 2. Navigation as clear glass ---------------------------------------- */

/* Desktop only. Below the breakpoints the links become a stacked drawer, where
   individual glass tiles would fight the full-width panel behind them. The two
   navigations collapse at different widths — 860px for the interior pages,
   900px for the home-page masthead — so each gets its own floor. */
@media (min-width: 861px) {
  .nav .nav-links a {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.16);
    border-top-color: rgba(255,255,255,0.38);
    border-bottom-color: rgba(1,15,40,0.32);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.02));
    backdrop-filter: blur(30px) saturate(130%);
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 -2px 3px rgba(1,15,40,0.22),
      0 2px 0 rgba(1,15,40,0.26),
      0 5px 12px rgba(1,15,40,0.3);
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  }
  .nav .nav-links a:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.04));
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.48),
      inset 0 -2px 3px rgba(1,15,40,0.2),
      0 3px 0 rgba(1,15,40,0.26),
      0 7px 15px rgba(1,15,40,0.34);
  }
  .nav .nav-links a:active {
    transform: translateY(2px);
    box-shadow:
      inset 0 2px 4px rgba(1,15,40,0.4),
      0 0 0 rgba(1,15,40,0),
      0 1px 4px rgba(1,15,40,0.3);
  }
  /* Current page reads as a pressed tile rather than an underlined word. */
  .nav .nav-links a.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.14) 60%, rgba(255,255,255,0.07));
    border-color: rgba(255,255,255,0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -2px 3px rgba(1,15,40,0.2),
      0 2px 0 rgba(1,15,40,0.26),
      0 6px 14px rgba(1,15,40,0.34);
  }
  .nav .nav-links a.active::after { display: none; }
}

@media (min-width: 901px) {
  .hh-nav.nav-links a {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.16);
    border-top-color: rgba(255,255,255,0.38);
    border-bottom-color: rgba(1,15,40,0.32);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.02));
    backdrop-filter: blur(30px) saturate(130%);
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 -2px 3px rgba(1,15,40,0.22),
      0 2px 0 rgba(1,15,40,0.26),
      0 5px 12px rgba(1,15,40,0.3);
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  }
  .hh-nav.nav-links a:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.04));
    transform: translateY(-1px);
  }
  .hh-nav.nav-links a:active { transform: translateY(2px); }
  .hh-nav.nav-links a.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.14) 60%, rgba(255,255,255,0.07));
    border-color: rgba(255,255,255,0.4);
  }
  .hh-nav.nav-links a.active::after { display: none; }
}

/* ---- 3. Footer legal row, admin door, version stamp ---------------------- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  order: 2;
  flex: 1 1 100%;
  margin: 4px 0 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.footer-legal a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--white-55);
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--white); }

/* The staff door. Deliberately quiet — Cloudflare Access is what actually
   guards it, this is just a bookmark for the two people who need it. */
.footer-legal a.footer-admin {
  margin-left: auto;
  color: rgba(255,255,255,0.34);
}
.footer-legal a.footer-admin:hover { color: var(--white-70); }
@media (max-width: 640px) {
  .footer-legal a.footer-admin { margin-left: 0; }
}

.site-ver {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.34);
}

/* ---- 4. Legal pages ------------------------------------------------------ */

/* Long-form prose. Narrow measure, generous headings, and links that read as
   links — these pages exist to be read, not skimmed. */
.legal-body h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 40px 0 12px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--white-70); margin: 0 0 14px; }
.legal-body p strong { color: var(--white); }
.legal-body a {
  color: var(--white);
  border-bottom: 1px solid var(--line);
}
.legal-body a:hover { border-color: var(--white-70); }
.legal-body ul.tick-list { margin: 18px 0 26px; }