/* ==========================================================================
   OPAL — Navigation chrome (slide indicators + download button)
   ========================================================================== */

/* ── Desktop corner logo ──
   Hidden by default; the pointer:fine desktop breakpoint (responsive.css)
   is the only context that shows it — mobile/tablet already have their
   own logo via .mobile-nav__logo in their own sticky header. */
.corner-logo {
  display: none;
}

/* ── Slide indicators (right side) ── */

.slide-nav {
  position: fixed;
  /* Flat px, no vw/clamp — a clamp(min, Nvw, max) still VARIES between
     min and max across part of its range (here, roughly 1100-1285px
     viewport width), so at those widths this and the hamburger/logo
     cluster it must match weren't perfectly static; they shifted by a
     few px as the window was resized. A bare constant can't vary by
     definition, at any width. Matches .mobile-nav's own offset in
     responsive.css so the two stay aligned with each other. */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide-nav__dot {
  position: relative;
  /* content-box overrides the global border-box reset — otherwise the
     padding below (for the tap-target) would eat into and shrink this
     width/height instead of adding around it. */
  box-sizing: content-box;
  width: 24px;
  height: 3px;
  /* Padding + content-box clip: grows the clickable/tappable box without
     changing the visible dash's size — the background only paints inside
     the (unpadded) content box, so the compact look is unchanged. */
  padding: 4px 6px;
  background-clip: content-box;
  border-radius: 2px;
  background-color: rgba(215, 167, 119, 0.25);
  transition: all 0.4s var(--ease-out);
  cursor: pointer;
}

.slide-nav__dot.is-active {
  width: 32px;
  background-color: var(--gold);
}

.slide-nav__dot:hover {
  background-color: var(--gold);
  opacity: 0.7;
}

/* Hover / focus tooltip showing the slide title */
.slide-nav__dot::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(6px);
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(14, 26, 54, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.slide-nav__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(6px);
  border: 5px solid transparent;
  border-left-color: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.slide-nav__dot:hover::after,
.slide-nav__dot:focus-visible::after,
.slide-nav__dot:hover::before,
.slide-nav__dot:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── PDF / DocSend button ──
   Sticky (always fixed, always visible). Compact navy pill supplied as a
   self-contained SVG asset (gold circular download icon + "PDF" label);
   .download-btn only handles the fixed placement. This is a real link to
   the DocSend presentation, not a local file action. */

.download-btn {
  position: fixed;
  bottom: clamp(14px, 2.4vh, 30px);
  right: clamp(14px, 2vw, 30px);
  z-index: var(--z-dock);
  transition: opacity 0.4s var(--ease-out), transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opal-pdf-btn {
  display: block;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opal-pdf-btn svg {
  display: block;
  width: clamp(128px, 18vw, 180px);
  height: auto;
}

.opal-pdf-btn:hover { transform: translateY(-2px); }
.opal-pdf-btn:active { transform: translateY(1px) scale(0.98); }
.opal-pdf-btn:focus-visible {
  outline: 2px solid #DDBD98;
  outline-offset: 4px;
  border-radius: 27px;
}

@media (prefers-reduced-motion: reduce) {
  .opal-pdf-btn { transition: none; }
  .opal-pdf-btn:hover { transform: none; }
}

/* ── Slide menu (hamburger) ──
   Shown on every viewport: full sticky header on phone/tablet,
   overlay header on touch-first "deck-sized" tablets, and a compact
   floating button on pointer-fine desktop (see responsive.css for all
   three contexts — each is a distinct visual treatment, but all three
   drive the same #mobile-nav-menu markup/JS). Every viewport size is
   covered by one of the three breakpoint-scoped rule sets in
   responsive.css, each fully self-contained (display, position, open/
   closed state) — there's deliberately no bare/unscoped default here. */

/* No truncation — the font-size clamp() in each context (responsive.css)
   is tuned to keep the longest label ("Founding Customer Commitment")
   on one line at that context's narrowest supported width, since each
   row's height comes from flex-dividing the drawer's fixed height
   across all 17 items (so the whole list fits without scrolling) and a
   wrapped second line would spill into the next row. */
.mobile-nav__label {
  flex: 1 1 auto;
  min-width: 0;
}