/* okitoki-v4 — base (layer 1): a minimal reset and element defaults.
 * The only file allowed to style bare elements. Kept soft on purpose: no !important,
 * no blanket `p { margin: 0 }` — plugin and editor markup (CF7, Polylang, Chaty, post
 * content) must keep sensible defaults. v4: replaces the mock-up's global normalize. */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--v-header-height) + var(--v-space-md));
}

body {
    margin: 0;
    background-color: rgb(var(--v-color-surface));
    color: rgb(var(--v-color-text));
    font-family: var(--v-font-family);
    font-size: var(--v-font-size);
    font-weight: var(--v-font-weight);
    line-height: var(--v-font-line-height);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--v-space-sm);
    font-weight: var(--v-font-weight-bold);
    line-height: var(--v-font-line-height-heading);
    text-wrap: balance;
}

p {
    margin: 0 0 var(--v-space-md);
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid rgb(var(--v-color-primary));
    outline-offset: 2px;
}

[hidden] {
    display: none !important; /* the one sanctioned !important: hidden must win over component display rules */
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: var(--v-space-sm);
    left: var(--v-space-sm);
    z-index: calc(var(--v-z-modal) + 1);
    width: auto;
    height: auto;
    clip: auto;
    padding: var(--v-space-sm) var(--v-space-md);
    background: rgb(var(--v-color-white));
    color: rgb(var(--v-color-text));
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow);
}