/* okitoki-v4 — UI primitives (layer 3): headings, buttons, links, checklist.
 * Small elements every page uses. Larger blocks (cards, tabs, FAQ, ...) live in
 * components/ and load only where they are rendered. */

/* ---------- Headings ---------- */
.v-heading {
    margin: 0;
    line-height: var(--v-font-line-height-heading);
    text-wrap: balance;
}
.v-heading--h1 { font-size: var(--v-font-size-xl); text-transform: uppercase; }
.v-heading--h2 { font-size: var(--v-font-size-xl); }
.v-heading--h3 { font-size: var(--v-font-size-lg); }
.v-heading--h4,
.v-heading--h5 { font-size: var(--v-font-size); }
.v-kicker {
    display: block;
    margin-bottom: var(--v-space-xs);
    color: rgb(var(--v-color-primary));
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---------- Button ---------- */
.v-button {
    --v-button-size: 56px;
    --v-button-color: rgb(var(--v-color-primary));
    --v-button-color-text: rgb(var(--v-color-white));
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v-space-xs);
    height: var(--v-button-size);
    padding: 0 var(--v-space-lg);
    overflow: hidden;
    border: none;
    border-radius: calc(var(--v-button-size) / 2);
    background-color: var(--v-button-color);
    color: var(--v-button-color-text);
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-semibold);
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--v-duration) var(--v-timing), box-shadow var(--v-duration) var(--v-timing);
}
/* Accent fill slides in from the left on hover. */
.v-button::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background-color: rgb(var(--v-color-accent));
    transform: translateX(-100%);
    transition: transform var(--v-duration) var(--v-timing);
}
.v-button:hover {
    --v-button-color-text: rgb(var(--v-color-white));
}
.v-button:hover::before {
    transform: translateX(0);
}
.v-button > * {
    position: relative;
    z-index: 1;
}
/* v4: the mock-up removed the outline and offered nothing instead. */
.v-button:focus-visible {
    outline: none;
    box-shadow: var(--v-focus-ring);
}
.v-button--white {
    --v-button-color: rgb(var(--v-color-white));
    --v-button-color-text: rgb(var(--v-color-primary));
}
.v-button--outline {
    --v-button-color-text: var(--v-button-color);
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--v-button-color);
}
.v-button--outline:focus-visible {
    box-shadow: inset 0 0 0 2px var(--v-button-color), var(--v-focus-ring);
}
.v-button--only-icon {
    width: var(--v-button-size);
    padding: 0;
}
/* v4: a compact size for cards, forms and the header (the mock-up had one size). */
.v-button--sm {
    --v-button-size: 40px;
    padding: 0 var(--v-space-md);
    font-size: var(--v-font-size-xs);
}
.v-button--block {
    width: 100%;
}
/* v4: disabled state (the mock-up had none). */
.v-button:disabled,
.v-button[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}
.v-button:disabled::before,
.v-button[aria-disabled="true"]::before {
    display: none;
}
.v-button__icon {
    width: 24px;
    height: 24px;
}

/* ---------- Link ---------- */
.v-link {
    color: rgb(var(--v-color-accent));
    font-weight: var(--v-font-weight-bold);
    text-decoration: none;
    transition: color var(--v-duration) var(--v-timing);
}
.v-link:hover {
    color: rgb(var(--v-color-primary));
}

/* ---------- Checklist ---------- */
.v-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--v-space-sm);
    margin: 0 0 var(--v-space-lg);
    padding: 0;
    list-style: none;
}
.v-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--v-space-sm);
}
.v-checklist__icon {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background-color: rgba(var(--v-color-primary), .12);
    color: rgb(var(--v-color-primary));
}
.v-checklist__icon svg {
    width: 14px;
    height: 14px;
}
.v-checklist--white .v-checklist__icon {
    background-color: rgba(var(--v-color-white), .15);
    color: rgb(var(--v-color-white));
}
.v-checklist--grey .v-checklist__icon {
    background-color: rgba(var(--v-color-text-secondary), .1);
    color: rgb(var(--v-color-text-secondary));
}