.error {
    color: red;
}

/* Font smoothing and text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Color highlight on mobile tap */
.nav_link,
.nav_dropdown {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Disable scroll if responsive menu is open */
body:has(.nav_component .w-nav-button.w--open) {
    overflow: hidden;
}

/* Display backdrop when responsive menu is open */
body:has(.nav_component .w-nav-button.w--open) .nav_dropdown_backdrop {
    display: block;
}

/* Close menu when backdrop is clicked */
.nav_dropdown_backdrop:has(+ .w-nav-button.w--open) {
    display: none;
}

/* Text selection styling */
::-moz-selection {
    /* Firefox */
    color: #ffffff;
    background: var(--main-colors--primary);
}

::selection {
    /* Other browsers */
    color: #ffffff;
    background: var(--main-colors--primary);
}

.w-slider-dot {
    background-color: var(--main-colors--primary);
}

/* Apply "..." after lines of text (truncation) */
.text-style-4lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* remove border-bottom of the last nav-link */
.nav_dropdown_list_item:last-of-type {
    border-bottom: none;
}

/* nav_hb styles */
.nav_hb {
    --thickness: 0.2rem;
    --gap: 0.4rem;
    --rotate: 45;
    --width: 100%;
}

.w--open .nav_hb_line {
    transform: scaleX(0);
}

.w--open .nav_hb_line:first-child {
    transform: translateY(calc(var(--thickness) + var(--gap)))
        rotate(calc(var(--rotate) * 3 * 1deg));
}

.w--open .nav_hb_line:last-child {
    transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1))
        rotate(calc(var(--rotate) * 1deg));
}

.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.error {
    border-color: #dc2626 !important;
}