/*!
 * Sticky Situation — design refinements
 * Load LAST, after style.css and reasons-scroll.min.css.
 * Each block is independent: delete any block you don't want.
 */

/* ---------- 1. Visible keyboard focus (style.css removes all outlines) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid #222 !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

/* In-page anchors (e.g. "Request a demo" → #contact) land below the fixed header */
section[id] { scroll-margin-top: calc(var(--nav-offset, 64px) + 8px); }

/* ---------- 2. Buttons: no layout shift on hover, a physical press instead of a colour flip ---------- */
.btn-main {
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out, background-color 150ms ease-out,
              color 150ms ease-out, border-color 150ms ease-out, filter 150ms ease-out;
}
/* Reserve the 3px hover border at rest so the button never grows (padding reduced to keep the same size) */
.btn-main:not(.btn-main-dark) {
  border: 3px solid transparent;
  padding: 14px 30px;
}
.btn.btn-main:active { transform: scale(0.97); }
.btn.btn-main:not(.btn-main-dark):active {
  background-color: #f0ed00 !important;
  color: #000 !important;
  border-color: #222 !important;
}
/* The yellow glow disappears on the yellow form background */
.btn-main-dark { box-shadow: none !important; }
.btn-main:disabled { opacity: .6; cursor: progress; }

/* ---------- 3. Header as a translucent material ---------- */
header.navigation { background: transparent !important; }
.navbar.fixed-top {
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Open menu sits over content: make it near-solid so the links stay legible */
.navbar.fixed-top.menu-open { background-color: rgba(255, 255, 255, 0.97) !important; }

@media (prefers-reduced-transparency: reduce) {
  .navbar.fixed-top { background-color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .navbar.fixed-top { background-color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #222 !important; }
}

/* ---------- 4. Mobile menu: 44px targets, interruptible open/close ---------- */
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  /* Pin the centered logo to the top row; style.css leaves `top` unset, so it drifted
     to the vertical middle of the navbar whenever the menu opened */
  .navbar .navbar-brand {
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* Replaces Bootstrap's collapse (which ignores taps mid-animation).
     CSS transitions re-target from their current value, so a second tap reverses instantly.
     Open:  the panel grows first, then each link fades in where it will rest (no sliding).
     Close: the links fade out together, then the panel folds away. */
  #primaryNav {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 240ms cubic-bezier(.2, .8, .2, 1) 90ms,
                visibility 0s linear 330ms;
  }
  #primaryNav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 300ms cubic-bezier(.2, .8, .2, 1),
                visibility 0s;
  }

  /* Each link is a full-width row across the container (the whole row is tappable) */
  #primaryNav > .navbar-nav {
    min-height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0;
    width: 100%;
  }
  #primaryNav .nav-item { width: 100%; }
  #primaryNav .nav-item:first-child { padding-top: 8px; }
  #primaryNav .nav-item:last-child { padding-bottom: 8px; }
  #primaryNav .nav-link {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px !important;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease-out;
  }
  #primaryNav .nav-link:active { background-color: rgba(0, 0, 0, 0.06); }
  #primaryNav .nav-link.active { background-color: rgba(255, 253, 0, 0.35); }

  #primaryNav .nav-item { opacity: 0; transition: opacity 110ms ease; }
  #primaryNav.is-open .nav-item { opacity: 1; transition: opacity 220ms ease; }
  #primaryNav.is-open .nav-item:nth-child(1) { transition-delay: 140ms; }
  #primaryNav.is-open .nav-item:nth-child(2) { transition-delay: 185ms; }
  #primaryNav.is-open .nav-item:nth-child(3) { transition-delay: 230ms; }
  #primaryNav.is-open .nav-item:nth-child(4) { transition-delay: 275ms; }
}

@media (prefers-reduced-motion: reduce) {
  #primaryNav, #primaryNav.is-open { transition: visibility 0s !important; }
  #primaryNav .nav-item,
  #primaryNav.is-open .nav-item { transition: opacity 150ms ease !important; transition-delay: 0s !important; }
  .btn.btn-main:active { transform: none; }
}

/* ---------- 5. Typography: size-specific tracking and leading ---------- */
h1 { line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h2 { line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
p  { text-wrap: pretty; }

/* Long copy reads better left-aligned at a comfortable measure */
.measure { max-width: 62ch; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .measure { margin-left: 0; } }

/* ---------- 6. Form validation feedback ---------- */
#contact-form .form-control.is-invalid { border-color: #b00020; }
#contact-form .invalid-feedback { color: #8a0018; font-weight: 500; }