/**
 * Smooth anchor scrolling, disabled for users who prefer reduced motion.
 */
html {
    scroll-behavior: smooth;
}

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

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

/**
 * Focus: a 2px primary outline for links and other elements, a soft primary ring
 * for buttons and form fields (fields also get a primary border from the `field` class).
 */
:focus-visible,
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:focus-visible,
.elementor .field:focus,
.elementor input.e-form-checkbox-base:focus-visible {
    outline:    none;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/**
 * Sticky site header. The sticky element has to be the Theme Builder location,
 * because the Elementor header inside it is exactly as tall as its parent.
 */
.elementor-location-header {
    position: sticky;
    top:      var(--wp-admin--admin-bar--height, 0px);
    z-index:  100;
}

/**
 * Dark header while it overlaps a dark section, toggled by @oki/header-theme.
 * Same token overrides as the `section-dark` class, plus the white logo.
 */
.site-header.is-dark {
    --color-background:     var(--color-dark);
    --color-background-alt: var(--color-dark-surface);
    --color-heading:        var(--color-text-inverse);
    --color-text:           var(--color-text-inverse-muted);
    --color-border:         var(--color-dark-border);
}

.site-header.is-dark .logo {
    content: url('/wp-content/uploads/2026/10/logo-white.svg');
}

/**
 * Main navigation on small screens: a dropdown below the header bar that slides open.
 * The open state is the `is-nav-open` class on the header, toggled by @oki/nav-toggle.
 */
@media (max-width: 1199px) {
    .elementor .site-header .site-nav {
        position:          absolute;
        inset-block-start: 100%;
        inset-inline:      0;
        flex-direction:    column;
        align-items:       stretch;
        gap:               var(--spacing-md);
        padding:           var(--spacing-md) var(--spacing-gutter);
        background-color:  var(--color-background);
        border-block-end:  1px solid var(--color-border);
        visibility:        hidden;
        clip-path:         inset(0 0 100% 0);
        transition:        clip-path 0.3s ease, visibility 0s 0.3s;
    }

    .elementor .site-header.is-nav-open .site-nav {
        visibility: visible;
        clip-path:  inset(0);
        transition: clip-path 0.3s ease;
    }
}

/**
 * Burger icon of the navigation toggle: two bars that turn into a cross when the menu is open.
 * The button text stays as accessible name; the `nav-toggle` class hides it visually.
 */
.nav-toggle::before,
.nav-toggle::after {
    content:          '';
    display:          block;
    width:            24px;
    height:           2px;
    border-radius:    var(--radius-full);
    background-color: currentColor;
    transition:       transform 0.3s ease;
}

.nav-toggle[aria-expanded='true']::before {
    transform: translateY(3px) rotate(45deg);
}

.nav-toggle[aria-expanded='true']::after {
    transform: translateY(-3px) rotate(-45deg);
}

/**
 * Boxes on dark sections get a subtle light top edge. A featured box shows the focus ring
 * while its button is hovered.
 */
.section-dark .card {
    box-shadow: inset 0 1px 1px var(--color-inset-highlight);
    transition: box-shadow 0.2s;
}

.card-featured:has(.btn:hover) {
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.section-dark .card-featured:has(.btn:hover) {
    box-shadow: inset 0 1px 1px var(--color-inset-highlight), 0 0 0 4px var(--color-focus-ring);
}

/**
 * Inline links in running text are underlined, so they don't rely on color alone.
 */
.elementor a:not([class]) {
    color:                 inherit;
    text-decoration:       underline;
    text-underline-offset: 0.2em;
}

/**
 * Autofilled fields keep the regular field look. The browser's autofill background cannot be
 * overridden directly, so its transition is stretched until it never shows; the text color is set explicitly.
 */
.elementor .field:-webkit-autofill {
    -webkit-text-fill-color: var(--color-heading);
    caret-color:             var(--color-heading);
    transition:              background-color 600000s 0s, color 600000s 0s, border-color 0.2s, box-shadow 0.2s;
}

/**
 * Links inserted by plugins into navigation links (e.g. the Borlabs consent link) look like the other nav links.
 */
.nav-link a:not([class]) {
    text-decoration: none;
}

/**
 * Cloudflare Turnstile sets an inline `flex: 0 0 100%` meant for Elementor's default row form.
 * In our column forms (class `form`) that equals the full form height, so it is reset here.
 */
.form .cfturnstile-atomic-field {
    flex:   none !important;
    margin: 0 !important;
}

/**
 * Checkbox, based on @tailwindcss/forms. Elementor classes cannot hold :checked.
 */
.elementor input.e-form-checkbox-base {
    appearance:          none;
    display:             inline-block;
    flex:                none;
    width:               1.25rem;
    height:              1.25rem;
    margin:              0.15em 0 0;
    padding:             0;
    border:              1px solid var(--color-text-muted);
    border-radius:       var(--radius-sm);
    background-color:    transparent;
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     100% 100%;
    clip-path:           none;
    opacity:             1;
    transform:           none;
    cursor:              pointer;
}

.elementor input.e-form-checkbox-base::before {
    content: none;
    display: none;
}

.elementor input.e-form-checkbox-base:checked {
    border-color:     var(--color-primary);
    background-color: var(--color-primary);
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 -960 960 960\' fill=\'white\'%3E%3Cpath d=\'m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\'/%3E%3C/svg%3E');
}

/**
 * Plain bullet list: a paragraph with the `list` class containing a <ul> (legal texts).
 */
.list ul {
    display:              flex;
    flex-direction:       column;
    gap:                  var(--spacing-xs);
    margin:               0;
    padding-inline-start: 1.5em;
    list-style:           disc;
}

/**
 * Check list: a paragraph with the `checklist` class containing a plain <ul>.
 * The check icon is assets/icons/check.svg, used as mask so it takes the text color rules below.
 */
.checklist ul {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-xs);
    margin:         0;
    padding:        0;
    list-style:     none;
}

.checklist li {
    position:             relative;
    padding-inline-start: 2em;
}

.checklist li::before {
    content:            '';
    position:           absolute;
    inset-block-start:  0;
    inset-inline-start: 0;
    width:              1.5em;
    height:             1.5em;
    background-color:   var(--color-primary);
    mask:               url('icons/check.svg') center / contain no-repeat;
}

.checklist strong {
    color:       var(--color-heading);
    font-weight: var(--font-weight-medium);
}

.checklist-inline ul {
    flex-direction: row;
    flex-wrap:      wrap;
    column-gap:     var(--spacing-lg);
}

.section-dark .checklist li::before {
    background-color: var(--color-text-inverse);
}