:root {
  --wm-color-navy-950: #071a2b;
  --wm-color-navy-800: #12324a;
  --wm-color-wind-600: #1476a8;
  --wm-color-wind-400: #52b6d8;
  --wm-color-energy-700: #1c704d;
  --wm-color-energy-600: #23845c;
  --wm-color-energy-400: #63be8f;
  --wm-color-safety-600: #d9641e;
  --wm-color-danger-700: #9e2f2f;
  --wm-color-graphite-900: #1c2730;
  --wm-color-steel-500: #657d89;
  --wm-color-steel-200: #d7e0e5;
  --wm-color-steel-100: #edf2f4;
  --wm-color-off-white: #f8faf9;
  --wm-color-white: #fff;
  --wm-color-info-050: #eaf5fa;
  --wm-color-success-050: #eaf6ef;
  --wm-color-warning-050: #fff1e8;
  --wm-color-danger-050: #fff0f0;
  --wm-space-2xs: 0.375rem;
  --wm-space-xs: 0.625rem;
  --wm-space-sm: 1rem;
  --wm-space-md: clamp(1.25rem, 1rem + 1vw, 2rem);
  --wm-space-lg: clamp(2rem, 1.25rem + 2.5vw, 4rem);
  --wm-space-xl: clamp(3.5rem, 2rem + 5vw, 7rem);
  --wm-radius-sm: 0.25rem;
  --wm-radius-md: 0.5rem;
  --wm-radius-lg: 0.875rem;
  --wm-content: 760px;
  --wm-wide: 1400px;
  --wm-motion-fast: 140ms;
  --wm-motion-base: 220ms;
  --wm-motion-slow: 420ms;
  --wm-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wm-focus-ring: 0 0 0 3px rgb(20 118 168 / 32%);
  --wm-shadow-raised: 0 18px 55px rgb(7 26 43 / 12%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wm-color-off-white);
  color: var(--wm-color-graphite-900);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--wp--preset--font-family--sans, Manrope, Inter, ui-sans-serif, system-ui, sans-serif);
}

::selection {
  background: var(--wm-color-wind-400);
  color: var(--wm-color-navy-950);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

:where(p, li) {
  max-width: 72ch;
}

/*
  break-word, anywhere degil. `anywhere` min-content hesabini da etkiledigi
  icin satir sonunda bosluk firsati varken bile kelimenin ortasindan kirar:
  buyuk baslikta "dogrulanabilir" kelimesi "dogrulanabil / ir" olarak
  bolunuyordu. `break-word` uzun bir kelimeyi yalnizca gercekten sigmadiginda
  kirar - uzun urun kodlari icin ihtiyac duyulan davranis da budur.
*/
:where(h1, h2, h3, h4, h5, h6, p, li, a, button) {
  overflow-wrap: break-word;
}

/* Tablo hucresi istisna: dar bir sutunda uzun bir parca numarasi tabloyu
   tasirir ve orada agresif kirma dogru davranistir. */
:where(th, td) {
  overflow-wrap: anywhere;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  border-radius: var(--wm-radius-sm);
  outline: 2px solid var(--wm-color-wind-600);
  outline-offset: 3px;
  box-shadow: var(--wm-focus-ring);
}

.wm-skip-link {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100000;
  padding: 0.75rem 1rem;
  background: var(--wm-color-navy-950);
  color: var(--wm-color-white);
  transform: translateY(-140%);
}

.wm-skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* CP16 — final visual and motion polish
   ------------------------------------------------------------------------ */

/* Windows High Contrast and other forced-colour modes replace the palette
   entirely. Anything the design expressed only through a background or a
   border colour disappears there, so those affordances are restated with
   properties forced-colours keeps: outlines, and the system colour keywords. */
@media (forced-colors: active) {
    .wm-button,
    .wm-card,
    .wm-surface,
    .wm-knowledge-sources,
    .wm-knowledge-card {
        border: 1px solid ButtonBorder;
    }

    .wm-button {
        forced-color-adjust: none;
        background: ButtonFace;
        color: ButtonText;
    }

    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    /* A state shown only as a colour fill is invisible here. */
    .is-active,
    [aria-pressed="true"],
    [aria-current] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* prefers-reduced-motion is a request to stop movement, not to stop feedback.
   Transitions are collapsed to a duration short enough not to read as motion
   while still letting state changes register, and anything that scrolls,
   parallaxes or loops is stopped outright. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* A technical catalogue gets printed: buyers take a specification into a
   meeting. Navigation, dialogs and interactive controls are noise on paper,
   and a link whose target is invisible is worse than no link. */
@media print {
    .wm-desktop-nav,
    .wm-drawer-toggle,
    .wm-dialog,
    .wm-command-search,
    .wm-knowledge-index,
    footer .wp-block-navigation {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .wm-surface,
    .wm-card,
    .wm-knowledge-sources {
        border: 1px solid #999;
        break-inside: avoid;
    }

    /* Sources are the reason the printed page can be checked at all. */
    .wm-knowledge-sources a::after,
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    h1, h2, h3 {
        break-after: avoid;
    }

    table {
        break-inside: auto;
    }

    tr {
        break-inside: avoid;
    }
}