/* Hayyak — support-platform hero + UI layer (dark mode, LTR). Loaded after style.css. */
@keyframes hy-draw {
    from {
        stroke-dashoffset: 1
    }

    to {
        stroke-dashoffset: 0
    }
}

body {
    overflow-x: clip
}

/* ── Hero ─────────────────────────────────────────────── */
.nds-banner-section.hy-hero {
    --hy-bg: #104631;
    --hy-line: #88d8ad;
    --hy-art-h: clamp(120px,13vw,190px);
    background: var(--hy-bg);
    height: 491px;
    align-items: flex-start;
    padding-block: 48px 0;
    overflow: hidden;
    isolation: isolate
}

.hy-hero .banner-text {
    position: relative;
    z-index: 1
}

    .hy-hero .banner-text h1, .hy-hero .banner-text p {
        color: #fff
    }

    .hy-hero .banner-text p {
        max-width: 640px
    }

.hy-art {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    height: var(--hy-art-h);
    color: var(--hy-line);
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)
}

    .hy-art g {
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        animation: hy-draw 2.6s cubic-bezier(.4,0,.2,1) both
    }

@media (min-width:992px) {
    .hy-hero .banner-text .uj-btn {
        margin-top: 48px
    }

    .hy-art g {
        transform: translateX(-180px)
    }
}
/* Blue variant: add class "hy-hero--blue" to the section */
.hy-hero.hy-hero--blue {
    --hy-bg: #1849a9;
    --hy-line: #b2ddff
}

@media (max-width:768px) {
    .nds-banner-section.hy-hero {
        height: auto;
        min-height: 491px;
        padding: 40px 16px calc(var(--hy-art-h) + 8px)
    }
}

html[dir="ltr"] .nds-banner-section.hy-hero {
    height: auto;
    min-height: 491px;
    padding-bottom: calc(var(--hy-art-h) + 16px)
}

html[data-theme="dark"] .nds-banner-section.hy-hero {
    --hy-bg: #092a1e
}

html[data-theme="dark"] .hy-hero.hy-hero--blue {
    --hy-bg: #102a56
}

/* ── Theme toggle (NDS dark mode: html[data-theme="dark"]) ───── */
.hy-theme--icon {
    padding-inline: 8px
}

    .hy-theme--icon .header-menu__item-arrow {
        margin: 0
    }

    .hy-theme--icon i {
        font-size: 22px
    }

.hy-theme:focus-visible {
    outline: 2px solid var(--text-default);
    outline-offset: -2px
}

html[data-theme="dark"] {
    color-scheme: dark;
    --colors-neutral-25: #0c111b;
    --colors-neutral-50: #111927;
    --colors-neutral-100: #1f2a37;
    --colors-neutral-200: #2d3541;
    --colors-neutral-300: #384250;
    --colors-neutral-400: #4d5761;
    --colors-neutral-500: #6c737f;
    --colors-neutral-600: #9da4ae;
    --colors-neutral-700: #d2d6db;
    --colors-neutral-800: #e5e7eb;
    --colors-neutral-900: #f3f4f6;
    --colors-neutral-950: #f9fafb;
    --background-body: #0c111b;
    --background-white: #161b26;
    --background-menu: #161b26;
    --background-card: #161b26;
    --text-default: #f3f4f6;
    --text-primary-paragraph: #d2d6db;
    --text-secondary-paragraph: #9da4ae;
    --icon-default: #d2d6db;
    --border-neutral-primary: #384250;
    --border-neutral-secondary: #2d3541;
    --border-neutral-tertiary: #1f2a37;
    --button-background-neutral-hovered: #1f2a37;
    --button-background-neutral-default: #1f2a37;
    --link-primary: #54c08a;
    --link-primary-hovered: #7ad19f;
}

    html[data-theme="dark"] body {
        background: #0c111b;
        color: #f3f4f6
    }

    html[data-theme="dark"] .digital-stamp-card {
        background: #111927
    }

        html[data-theme="dark"] .digital-stamp-card h6, html[data-theme="dark"] .digital-stamp-card p {
            color: #f3f4f6
        }

    html[data-theme="dark"] .digital-stamp-body .box, html[data-theme="dark"] .digital-stamp-body .stamp-link-box {
        background: #161b26;
        color: #f3f4f6;
        border-color: #384250
    }

    html[data-theme="dark"] .digital-stamp-body .img-border-rounded {
        background: #1f2a37
    }

    html[data-theme="dark"] .header, html[data-theme="dark"] .offcanvas {
        background-color: #161b26;
        color: #f3f4f6
    }

    html[data-theme="dark"] .header-menu__item, html[data-theme="dark"] .header-aside-menu__item, html[data-theme="dark"] .header-menu__item-arrow, html[data-theme="dark"] .header-menu__item-label {
        color: #f3f4f6
    }

    html[data-theme="dark"] .header__logo img {
        filter: brightness(0) invert(1)
    }

    html[data-theme="dark"] .btn-close {
        filter: invert(1)
    }

    html[data-theme="dark"] .title, html[data-theme="dark"] h3, html[data-theme="dark"] .uj-card h3, html[data-theme="dark"] .uj-static-card .uj-static-card-title {
        color: #f3f4f6
    }

    html[data-theme="dark"] .uj-card p {
        color: #d2d6db
    }

    html[data-theme="dark"] .uj-card.bg-white, html[data-theme="dark"] .uj-card {
        background-color: #161b26 !important;
        border-color: #384250 !important
    }

    html[data-theme="dark"] .bg-white {
        background-color: #161b26 !important
    }

    html[data-theme="dark"] .bg-green {
        background-color: rgba(27,131,84,.15) !important
    }

    html[data-theme="dark"] .uj-btn--primary, html[data-theme="dark"] .uj-btn--primary:hover {
        color: #fff
    }

    html[data-theme="dark"] .uj-static-card-icon, html[data-theme="dark"] .uj-card .uj-card-icon {
        background-color: rgba(27,131,84,.2);
        color: #7ad19f
    }

    html[data-theme="dark"] .uj-static-card .uj-static-card-number {
        color: #7ad19f
    }

    html[data-theme="dark"] .uj-card-link i {
        background-color: #1f2a37;
        color: #f3f4f6
    }

        html[data-theme="dark"] .uj-card-link i:hover {
            background-color: #2d3541;
            color: #fff
        }

    html[data-theme="dark"] .uj-btn--primary-neutral--on-color {
        background-color: #f9fafb;
        color: #0c111b
    }

    html[data-theme="dark"] footer {
        background-color: #0c111b
    }

    html[data-theme="dark"] .cookie-box {
        background: #161b26;
        color: #f3f4f6
    }

/* ── Language (html[dir="ltr"]) ───────────────────────────────── */
html[dir="ltr"] body, html[dir="ltr"] .nds-banner-section, html[dir="ltr"] .stamp-ar {
    direction: ltr
}

html[dir="ltr"] .uj-static-wrap {
    direction: ltr
}

html[dir="ltr"] .offcanvas-end {
    right: 0;
    left: auto
}

html[dir="ltr"] .footer-img-log img {
    margin-left: 0;
    margin-right: 10px
}

html[dir="ltr"] .uj-card-link i {
    transform: scaleX(-1)
}

html[dir="ltr"] .digital-stamp-card .digital-stamp-header, html[dir="ltr"] .digital-stamp-body .box {
    direction: ltr
}

@media (prefers-reduced-motion:reduce) {
    .hy-art g {
        animation: none;
        stroke-dasharray: none
    }
}