/* Route-scoped stylesheet for the SSR /service-strategy.html page.
   Contains only rules that were already applied on that page before Batch 3:
   - the inline <style> block from the previous static service-strategy HTML
   - the .t20-btn rules that the design-system bundle injected at runtime
     (ported verbatim from _ds_bundle.js, components/button/Button.jsx). */

html { scroll-behavior: smooth; }
body { background: var(--surface-page); }
#root { min-height: 100vh; }

.t20-btn {
  --_h: 44px;
  --_px: 20px;
  --_fs: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--_h);
  padding-inline: var(--_px);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--_fs);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.t20-btn:active { transform: translateY(1px); }
.t20-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--focus-ring); }
.t20-btn[disabled] { cursor: not-allowed; opacity: 0.4; transform: none; }

.t20-btn--sm { --_h: 36px; --_px: 14px; --_fs: var(--fs-xs); }
.t20-btn--lg { --_h: 52px; --_px: 28px; --_fs: var(--fs-base); }

.t20-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.t20-btn--primary:hover:not([disabled]) { background: var(--action-primary-bg-hover); }
.t20-btn--primary:active:not([disabled]) { background: var(--action-primary-bg-active); }

.t20-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.t20-btn--secondary:hover:not([disabled]) { background: var(--action-secondary-bg-hover); border-color: var(--border-strong); }

.t20-btn--ghost { background: transparent; color: var(--action-ghost-fg); }
.t20-btn--ghost:hover:not([disabled]) { background: var(--action-ghost-bg-hover); }

.t20-btn--full { width: 100%; }
.t20-btn__icon { display: inline-flex; width: 1.15em; height: 1.15em; }
.t20-btn__icon svg, .t20-btn__icon img { width: 100%; height: 100%; }

/* Restore the browser default vertical button padding that the legacy pages had
   (the global reset in the app shell zeroes it); height stays 44/52/36px. */
.pg--dienst_strategy .t20-btn,
.pg--dienst_sprint .t20-btn,
.pg--onderzoek .t20-btn { padding-block: 1px; }
.pg--dienst_ai_readiness .t20-btn { padding-block: 1px; }
.pg--nieuwsbrief .t20-btn { padding-block: 1px; }
/* Same restore for the SSR homepage, whose root is .t20s (not .pg--*). */
.t20s .t20-btn { padding-block: 1px; }