/* Stitched felt buttons from the approved demo. Keep labels as live text. */
:root {
  --button-pad-x: 16px;
  --button-pad-y: 20px;
  --button-weight: 700;
}

.stitched-mode .btn {
  --button-texture: url("img/buttons/blue-stitched.webp");
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; min-width: 0; max-width: 100%;
  min-height: max(44px, calc(20px + var(--button-pad-y) + var(--button-pad-y)));
  padding: var(--button-pad-y) var(--button-pad-x);
  font-weight: var(--button-weight); line-height: 1.2;
  border: 0; border-radius: 15px; box-shadow: none;
  background: transparent; color: #fff;
  isolation: isolate; position: relative; top: 0;
}
.stitched-mode .btn::before {
  content: ""; position: absolute; inset: -8px -4px; z-index: -1;
  border: 24px solid transparent; border-radius: 0;
  background: none; filter: none;
  border-image-source: var(--button-texture);
  border-image-slice: 78 108 fill;
  border-image-width: 24px 28px;
  border-image-repeat: stretch;
  pointer-events: none;
}
.stitched-mode .btn::after { display: none; }
.stitched-mode .btn .ico {
  width: 18px; height: 18px; flex: 0 0 18px;
  background: transparent; border-radius: 0; padding: 0;
}
.stitched-mode .btn .ico svg { width: 17px; height: 17px; }
.stitched-mode .btn--ghost, .stitched-mode .closer .btn {
  --button-texture: url("img/buttons/white-stitched.webp"); color: #163aa1;
}
.stitched-mode .btn--give {
  --button-texture: url("img/buttons/green-stitched.webp"); color: #fff;
}
.stitched-mode .closer .btn:not(.btn--ghost)::before { background: none; filter: none; }
.stitched-mode .btn:hover {
  top: 1px; box-shadow: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.stitched-mode .btn:active { top: 3px; box-shadow: none; }
.stitched-mode .btn:focus-visible { outline: 3px solid #17233b; outline-offset: 7px; }
.stitched-mode .closer .btn:focus-visible { outline-color: #fff; }
.stitched-mode .btn:disabled { opacity: .5; cursor: not-allowed; }
.stitched-mode .hero .btn-row .btn { flex: 0 1 auto; width: auto; }
.stitched-mode #pro-bono .btn--give { width: auto; max-width: 100%; }

/* Room for the stitching and the menu icons without crowding the logo. */
.stitched-mode .site-head .wrap { height: auto; min-height: 94px; padding-block: 16px; gap: 16px; }
.stitched-mode .site-head .brand, .stitched-mode .site-head .btn { flex-shrink: 0; }
.stitched-mode .site-head .btn { white-space: nowrap; }
.stitched-mode .site-head .menu-btn { display: none; }
.stitched-mode .site-head .nav > a { gap: 7px; white-space: nowrap; padding-inline: .55em; }
.site-head .nav-ico { display: none; flex: 0 0 24px; width: 24px; height: 24px; color: var(--blue-deep); }
.site-head .nav-ico svg { width: 24px; height: 24px; }
@media (max-width: 1180px) {
  .site-head .nav-ico { display: inline-flex; }
  .stitched-mode .site-head .nav { display: none; }
  .stitched-mode .site-head .menu-btn { display: inline-flex; margin-left: 0; }
  .stitched-mode .site-head .head-right { margin-left: auto; }
  .stitched-mode .site-head.open .nav {
    display: grid; position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    margin: 0; padding: 8px 0; gap: 0; background: var(--paper); border-radius: 0; box-shadow: var(--shadow-lift);
    max-height: calc(100vh - 105px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 105px - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .stitched-mode .site-head.open .nav > a {
    width: 100%; min-height: 64px; padding: 16px 24px;
    font-size: 1.375rem; line-height: 1.2; gap: 14px; border-radius: 0;
  }
  .stitched-mode .site-head.open .nav .nav-contact { display: inline-flex !important; }
}
@media (max-width: 760px) {
  .stitched-mode .hero .btn-row, .stitched-mode .wd-hero .btn-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .stitched-mode .hero .btn-row .btn, .stitched-mode .wd-hero .btn-row .btn {
    width: 100%; min-width: 0; white-space: normal; font-size: 14px; line-height: 1.2;
    min-height: max(44px, calc(20px + var(--button-pad-y) + var(--button-pad-y)));
    padding: max(8px, calc(var(--button-pad-y) - 2px)) min(var(--button-pad-x), 10px); gap: 5px;
  }
  .stitched-mode .hero .btn-row .ico, .stitched-mode .wd-hero .btn-row .ico { width: 14px; height: 14px; flex: 0 0 14px; padding: 0; }
  .stitched-mode .hero .btn-row .ico svg, .stitched-mode .wd-hero .btn-row .ico svg { width: 14px; height: 14px; }
  .stitched-mode .hero .btn-row .btn span, .stitched-mode .wd-hero .btn-row .btn span { min-width: 0; }
  .stitched-mode #pro-bono .btn--give { padding-inline: min(var(--button-pad-x), 16px); font-size: 14px; }
  .stitched-mode .site-head .wrap { min-height: 88px; padding-block: 12px; gap: 12px; }
  .stitched-mode .site-head .btn { padding-block: max(8px, calc(var(--button-pad-y) - 2px)); }
}
@media (max-width: 560px) {
  .stitched-mode .site-head .head-right { display: none; }
  .stitched-mode .site-head .menu-btn { margin-left: auto; padding-inline: 12px; }
  .stitched-mode .site-head.open .nav {
    max-height: calc(100vh - 89px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 89px - env(safe-area-inset-top, 0px));
  }
}
@media (forced-colors: active) {
  .stitched-mode .btn { border: 2px solid ButtonText; color: ButtonText; background: ButtonFace; }
  .stitched-mode .btn::before { display: none; }
}