/*
 * Shared by every Wolke widget. Scoped to .wk-root, it neutralises what the theme and the old
 * Elementor kit apply globally: Hello Elementor styles every button pink, and kit 8 sets Urbanist
 * and blue hovers on buttons and links.
 */

html .wk-root,
html .wk-root * { box-sizing: border-box; }
/* kit 8 sets body to Urbanist 300 with .5px tracking and a 20px line height; the design assumes 400/normal/1.5 */
html .wk-root { font-family: var(--ok-font); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: normal; color: var(--ok-ink); text-align: start; -webkit-font-smoothing: antialiased; }
html .wk-root :is(p, ul, li, hr, form) { margin: 0; padding: 0; }
/* kit 8 also sets Urbanist and .5px tracking on h1-h6. The designs never use Urbanist: headings are
   Inter unless a component sets the Newsreader display face (0,2,0 outranks this). */
html .wk-root :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ok-font); letter-spacing: normal; text-transform: none; }
html .wk-root ul { list-style: none; }
/* Base reset: the structural properties. Components (.wk-root .wk-x, 0,2,0) override these. */
html .wk-root a { color: inherit; text-decoration: none; font-family: inherit; letter-spacing: inherit; }
html .wk-root button {
	appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; line-height: inherit;
	box-shadow: none; cursor: pointer; white-space: normal; transition: none;
}
/* State reset: only what Hello (pink button hover, #336 link hover) and kit 8 (#002D7F button
   hover) change. Nothing structural here: a padding reset in a :hover rule outranks the
   component's own padding, so the link shrinks under the pointer and the menu flickers.
   Colour falls back to the container's, which is why each dark container sets its own. */
html .wk-root a:hover,
html .wk-root a:focus,
html .wk-root button:hover,
html .wk-root button:focus { background-color: transparent; color: inherit; text-decoration: none; }
html .wk-root svg { display: block; flex: none; }
html .wk-root :focus-visible { outline: 2px solid var(--ok-blue); outline-offset: 3px; border-radius: 4px; }
.wk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[dir="rtl"] .wk-root .wk-flip { transform: scaleX(-1); }

.wk-root .wk-grid { width: 100%; max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter); }
.wk-root .wk-rule { border: 0; height: 1px; background: var(--ok-rule); }