/* ============================================================
   OPTIONAL EXTRAS — fenced add-ons
   ------------------------------------------------------------
   Every feature in this file is OFF the main branch by design.
   To remove all of them from a page, delete the two tags:
       <link rel="stylesheet" href="optional-extras.css">
       <script src="optional-extras.js" defer></script>
   Nothing else on the page depends on this file.
   ============================================================ */

/* ---- 1. Scroll progress bar ---- */
#ox-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #4D6FFF, #1400A0);
  z-index: 500; transition: width .1s linear;
}

/* ---- 2. Page loading animation ---- */
#ox-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}
#ox-loader.ox-done { opacity: 0; visibility: hidden; }
#ox-loader .ox-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(20,0,160,.15); border-top-color: #1400A0;
  animation: ox-spin .8s linear infinite;
}
@keyframes ox-spin { to { transform: rotate(360deg); } }

/* ---- 3. Floating contact button ---- */
/* offset above the back-to-top button so they don't collide */
.ox-fab {
  position: fixed; right: 24px; bottom: 78px; z-index: 91;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #1400A0;
  border: 1.5px solid rgba(20,0,160,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease;
}
.ox-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.ox-fab:focus-visible { outline: 2px solid #1400A0; outline-offset: 3px; }
@media (max-width: 768px) { .ox-fab { right: 16px; bottom: 70px; } }

/* ---- 4. Site search ---- */
.ox-search-btn {
  background: none; border: none; cursor: pointer;
  color: #555570; padding: 6px; display: inline-flex; align-items: center;
}
.ox-search-btn:hover { color: #1a1a2e; }
#ox-search {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15,10,107,.35); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px;
}
#ox-search.ox-open { display: flex; }
.ox-search-panel {
  width: 100%; max-width: 560px; background: #fff;
  border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.28);
  overflow: hidden;
}
.ox-search-panel input {
  width: 100%; padding: 20px 22px; border: none;
  font-family: inherit; font-size: 1rem; color: #1a1a2e;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ox-search-panel input:focus { outline: none; }
.ox-results { max-height: 320px; overflow-y: auto; }
.ox-results a {
  display: block; padding: 13px 22px; text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.ox-results a:hover, .ox-results a:focus { background: #f9f8f6; outline: none; }
.ox-results .ox-t { display: block; font-size: .9rem; font-weight: 600; color: #1a1a2e; }
.ox-results .ox-d { display: block; font-size: .8rem; color: #555570; }
.ox-empty { padding: 22px; font-size: .88rem; color: #555570; text-align: center; }

/* ---- 5. Rich tooltips ---- */
.ox-tip { position: relative; border-bottom: 1px dotted rgba(20,0,160,.45); cursor: help; }
.ox-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a2e; color: #fff;
  font-size: .78rem; font-weight: 500; line-height: 1.5;
  padding: 9px 12px; border-radius: 8px;
  width: max-content; max-width: 240px; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 400;
}
.ox-tip:hover::after, .ox-tip:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ---- 6. Copy-to-clipboard button ---- */
.ox-copy {
  background: none; border: 1px solid rgba(0,0,0,.10);
  border-radius: 7px; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600;
  color: #555570; padding: 3px 9px; margin-left: 8px;
  transition: all .2s ease; vertical-align: middle;
}
.ox-copy:hover { color: #1400A0; border-color: rgba(20,0,160,.4); }
.ox-copy.ox-copied { color: #1e7a4d; border-color: rgba(30,122,77,.4); }

/* ---- 7. Confirmation modal (external links) ---- */
#ox-modal {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15,10,107,.4); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#ox-modal.ox-open { display: flex; }
.ox-modal-box {
  background: #fff; border-radius: 18px; padding: 30px;
  max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.ox-modal-box h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; margin-bottom: 10px; color: #1a1a2e;
}
.ox-modal-box p { font-size: .88rem; color: #555570; margin-bottom: 22px; word-break: break-all; }
.ox-modal-actions { display: flex; gap: 10px; justify-content: center; }
.ox-modal-actions button, .ox-modal-actions a {
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: 10px 22px; border-radius: 100px; cursor: pointer;
  border: none; text-decoration: none;
}
.ox-go { background: #1400A0; color: #fff; }
.ox-cancel { background: transparent; color: #555570; border: 1.5px solid rgba(0,0,0,.12) !important; }
/* ---- 9. Print stylesheet ---- */
@media print {
  .nav, .footer, .to-top, .ox-fab, #ox-progress, #ox-loader,
  .mobile-overlay, .mobile-menu-btn, .ox-theme-btn, .ox-search-btn,
  #ox-search, #ox-modal, .cta-section, .typeform-section,
  .stepper-nav, .stepper-track { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; line-height: 1.5; }

  .page-hero, .err {
    background: none !important; color: #000 !important;
    padding: 0 0 18pt !important;
  }
  .page-hero h1, .page-hero p, .err h1, .err p { color: #000 !important; }
  .page-hero::before, .page-hero::after, .err::before { display: none !important; }

  main, .section, .section-inner { padding: 0 !important; max-width: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  /* expose link targets in print */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .faq-item { break-inside: avoid; border: 1px solid #ccc !important; }
  .faq-item .faq-answer { display: block !important; }
  h1, h2, h3 { break-after: avoid; }
}

/* Search icon follows the index nav's light/dark states like the text links do */
nav#nav .ox-search-btn { color: rgba(255,255,255,0.75); }
nav#nav .ox-search-btn:hover { color: #ffffff; }
nav#nav.scrolled .ox-search-btn { color: #555570; }
nav#nav.scrolled .ox-search-btn:hover { color: #1a1a2e; }