/* Home-page nav + footer controls (ported from components.css / index.html) for import.html.
   Tokens are scoped to the nav and footer so they don't affect the rest of this page. */
.w-nav, .w-footer {
  --paper: #FFFFFF; --ink: #15110D; --ink-3: #4A4138;
  --neutral-100: #F4F2EC; --neutral-200: #E8E4DA; --neutral-300: #D6D0C2;
  --marigold-ui: #E89A14; --r-pill: 999px;
  --dur-fast: 150ms; --dur-base: 240ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Button (Ghost, md) */
.w-nav .btn, .w-footer .btn {
  --btn-pad-y: 8px; --btn-pad-x: 12px; --btn-fs: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: var(--btn-fs);
  letter-spacing: 0; line-height: 1;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; user-select: none;
  background: transparent; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.w-nav .btn:focus-visible, .w-footer .btn:focus-visible { outline: none; border-color: var(--marigold-ui); }
.w-nav .btn, .w-nav .btn:hover, .w-footer .btn, .w-footer .btn:hover { text-decoration: none; }
.w-nav .btn:hover, .w-footer .btn:hover { background: var(--neutral-100); color: var(--ink); }
.w-nav .btn:active, .w-footer .btn:active { background: var(--neutral-200); }
.btn--icon-end { padding-left: calc(var(--btn-pad-x) + 2px) !important; }
.w-nav .btn svg, .w-footer .btn svg { width: 18px; height: 18px; flex: none; }
.btn-label { overflow-wrap: anywhere; }

/* Footer layout */
.w-footer .foot-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.w-footer .btn .icon-check { display: none; }
.w-footer .btn.is-copied .icon-copy { display: none; }
.w-footer .btn.is-copied .icon-check { display: block; }
@media (max-width: 600px) {
  .w-footer .foot-links { gap: 6px 12px; width: 100%; }
  .w-footer .foot-links .btn { --btn-pad-x: 8px; }
}

/* Hamburger + mobile dropdown */
.site-nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0;
  background: #fff; border: 1.5px solid var(--neutral-300); border-radius: 999px; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.site-nav__toggle:hover { border-color: var(--ink); }
.site-nav__toggle:focus-visible { outline: 2px solid var(--marigold-ui); outline-offset: 3px; }
.site-nav__toggle svg { width: 22px; height: 22px; flex: none; }
.site-nav__toggle .icon-close { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 720px) {
  .w-nav__links { gap: 2px; }
  .w-nav__links .btn { --btn-pad-x: 10px; }
}
@media (max-width: 600px) {
  .site-nav__toggle { display: inline-flex; }
  .w-nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px 16px;
    background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px;
    box-shadow: 0 10px 22px rgba(21, 17, 13, 0.10); display: none;
  }
  .w-nav__links[data-open] { display: flex; }
  .w-nav__links .btn { width: 100%; justify-content: flex-start; --btn-pad-y: 12px; --btn-pad-x: 14px; --btn-fs: 16px; }
  .w-nav__links .btn--icon-end { justify-content: space-between; padding-right: 14px; }
}