:root {
    --font-family-danef: "Charis SIL", "Gentium Plus", "Noto Serif", "Times New Roman", serif;
    --font-family-ui-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-ui-tr: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-ui-ru: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Tahoma", sans-serif;
    --font-family-ui-ar: "Noto Sans Arabic", "Tahoma", "Arial", sans-serif;
    --font-family-ui-he: "Noto Sans Hebrew", "Arial Hebrew", "Arial", sans-serif;
    --font-family-ui: var(--font-family-ui-en);
    --font-size-base: 16px;
    --line-height-base: 1.5;

    --cluster-cell-min: 3rem;
    --cluster-cell-gap: 0.5rem;
    --cluster-radius: 0.5rem;
    --cluster-border: #d0d7de;

    --shell-bg: #ffffff;
    --shell-fg: #1f2328;
    --shell-link: #0969da;
    --shell-border: #d8dee4;
}

:root[lang="tr"] {
    --font-family-ui: var(--font-family-ui-tr);
}

:root[lang="ru"] {
    --font-family-ui: var(--font-family-ui-ru);
}

:root[lang="ar"] {
    --font-family-ui: var(--font-family-ui-ar);
}

:root[lang="he"] {
    --font-family-ui: var(--font-family-ui-he);
}

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

html {
    font-size: var(--font-size-base);
}

body {
    margin: 0;
    font-family: var(--font-family-ui);
    line-height: var(--line-height-base);
    color: var(--shell-fg);
    background: var(--shell-bg);
}

a {
    color: var(--shell-link);
}

.skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateY(-120%);
    background: #111;
    color: #fff;
    padding: 0.5rem 0.75rem;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.shell-header,
.shell-footer {
    border-block-end: 1px solid var(--shell-border);
    padding-block: 0.75rem;
    padding-inline: 1rem;
}

.shell-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.shell-footer {
    border-block-start: 1px solid var(--shell-border);
    border-block-end: 0;
}

.shell-header__logo,
.shell-header__progress-chip {
    align-items: center;
    display: inline-flex;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
}

.shell-header__logo {
    font-weight: 700;
    text-decoration: none;
}

.shell-header__zones {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.shell-header__zone-list,
.shell-footer__bridge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin-block: 0.5rem;
    margin-inline: 0;
    padding: 0;
}

.shell-header__zone-list a,
.shell-footer__bridge-list a,
.shell-footer__what-is-danef {
    align-items: center;
    display: inline-flex;
    min-block-size: 1.5rem;
}

.shell-header__language-switcher {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shell-header__language-switcher-label {
    font-size: 0.875rem;
}

.shell-header__language-switcher select,
.shell-header__language-switcher button {
    font: inherit;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
}

.shell-header__language-switcher select {
    max-inline-size: 100%;
    padding-block: 0.375rem;
    padding-inline: 0.625rem;
}

.shell-header__language-switcher button {
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
}

.shell-header__progress-chip {
    border: 1px solid var(--shell-border);
    border-radius: var(--cluster-radius);
    gap: 0.125rem;
    justify-content: center;
    padding-block: 0.375rem;
    padding-inline: 0.625rem;
    text-decoration: none;
}

.shell-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1rem;
    padding-inline: clamp(0.75rem, 4vw, 2rem);
}

.zone-placeholder {
    border: 1px solid var(--cluster-border);
    border-radius: var(--cluster-radius);
    padding-block: 1rem;
    padding-inline: 1rem;
}

.shell-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .shell-header {
        align-items: stretch;
    }

    .shell-header__zones,
    .shell-header__language-switcher {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}