.header-settings {
    display: contents;
}

.ayg-logo.ayg-logo--footer {
    --logo-width: 30px;
}

@media (max-width: 768px) {
    .ayg-logo.ayg-logo--header {
        --logo-width: 25px;
    }
}

@media (max-width: 640px) {
    .site-nav .brand-logo-link .ayg-logo--header {
        --logo-width: 25px;
        margin-inline-end: 0;
    }
}

.header-settings__toggle,
.header-settings__label,
.header-settings__language-icon {
    display: none;
}

.scroll-top-button {
    display: none;
}

@media (max-width: 700px) {
    .mobile-tools-bar {
        background: #fffdf8;
        border-color: rgba(184, 134, 11, .3);
        box-shadow:
            inset 0 2px 0 rgba(212, 175, 55, .34),
            0 10px 30px rgba(28, 28, 46, .2);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mobile-tools-link {
        color: #272b38;
    }

    .mobile-tools-link img {
        opacity: .84;
    }

    .mobile-tools-link:is(:hover, :focus-visible) {
        background: rgba(212, 175, 55, .13);
    }

    .mobile-tools-link:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(184, 134, 11, .45);
    }

    .mobile-tools-link.is-active {
        color: #6d500b;
        background: linear-gradient(145deg, rgba(242, 202, 80, .3), rgba(212, 175, 55, .13));
        box-shadow: inset 0 0 0 1px rgba(184, 134, 11, .2), 0 5px 14px rgba(184, 134, 11, .14);
    }

    html[data-theme="night"] .mobile-tools-bar {
        background: #111827;
        border-color: rgba(242, 202, 80, .4);
        box-shadow:
            inset 0 2px 0 rgba(242, 202, 80, .28),
            0 12px 34px rgba(0, 0, 0, .46);
    }

    html[data-theme="night"] .mobile-tools-link {
        color: #f1f4f9;
    }

    html[data-theme="night"] .mobile-tools-link:is(:hover, :focus-visible) {
        background: rgba(242, 202, 80, .12);
    }

    html[data-theme="night"] .mobile-tools-link.is-active {
        color: #fff1a8;
        background: linear-gradient(145deg, rgba(242, 202, 80, .27), rgba(212, 175, 55, .1));
        box-shadow: inset 0 0 0 1px rgba(242, 202, 80, .2), 0 6px 16px rgba(0, 0, 0, .22);
    }

    .scroll-top-button {
        position: fixed;
        right: auto;
        left: 14px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 109;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--border-gold);
        border-radius: 50%;
        background: color-mix(in srgb, var(--bg2) 94%, transparent);
        color: var(--gold-dark);
        box-shadow: 0 8px 20px rgba(28, 28, 46, .14);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: bottom .2s ease, opacity .18s ease, transform .18s ease, visibility .18s;
        cursor: pointer;
    }

    .scroll-top-button.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .scroll-top-button:is(:hover, :focus-visible) {
        border-color: var(--gold);
        color: var(--gold-deep);
        outline: 3px solid rgba(184, 134, 11, .14);
        outline-offset: 2px;
    }

    .scroll-top-button__icon {
        position: relative;
        z-index: 1;
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .scroll-top-button__progress {
        position: absolute;
        inset: -3px;
        width: 46px;
        height: 46px;
        overflow: visible;
        pointer-events: none;
        transform: rotate(-90deg);
    }

    .scroll-top-button__progress-track,
    .scroll-top-button__progress-value {
        fill: none;
        stroke-width: 2;
    }

    .scroll-top-button__progress-track {
        stroke: rgba(255, 255, 255, .96);
        filter: drop-shadow(0 1px 2px rgba(28, 28, 46, .2));
    }

    .scroll-top-button__progress-value {
        stroke: var(--gold-dark);
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset .12s linear;
    }

    .mobile-tools-bar.is-hidden + .scroll-top-button {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .mobile-tools-bar.is-editing-suppressed + .scroll-top-button {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .scroll-top-button--standalone {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    html[data-theme="night"] .scroll-top-button {
        border-color: rgba(212, 175, 55, .34);
        background: rgba(23, 28, 39, .94);
        color: var(--gold-light);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
    }

    html[data-theme="night"] .scroll-top-button__progress-value {
        stroke: var(--gold-light);
    }
}

@media (max-width: 640px) {
    .site-nav .header-settings {
        position: relative;
        z-index: 4;
        display: block;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        direction: ltr;
    }

    .header-settings__toggle {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: linear-gradient(180deg, #fff, #f8f5eb);
        color: #6d5a20;
        box-shadow: 0 6px 16px rgba(28, 28, 46, .07);
        cursor: pointer;
    }

    .header-settings__toggle svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .header-settings__toggle:is(:hover, :focus-visible),
    .header-settings.is-open .header-settings__toggle {
        border-color: var(--border-gold);
        color: var(--gold-dark);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(184, 134, 11, .1), 0 8px 18px rgba(28, 28, 46, .08);
    }

    .site-nav .header-settings__menu {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        z-index: 5;
        display: none;
        width: 190px;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--bg) 96%, transparent);
        box-shadow: 0 16px 34px rgba(28, 28, 46, .16);
        backdrop-filter: blur(18px);
        direction: rtl;
    }

    .site-nav .header-settings.is-open .header-settings__menu {
        display: grid;
        gap: 2px;
    }

    .site-nav .header-settings__item,
    .site-nav .header-settings__item.site-language-overlay,
    .site-nav .header-settings__item.urdu-language-overlay {
        position: static;
        display: flex;
        grid-column: auto;
        grid-row: auto;
        align-items: center;
        justify-content: flex-start;
        justify-self: stretch;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--text);
        box-shadow: none;
        font-family: Cairo, sans-serif;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.4;
        text-decoration: none;
        transform: none;
        cursor: pointer;
    }

    .site-nav .header-settings__item:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--gold) 10%, var(--bg2));
        color: var(--gold-deep);
        outline: 2px solid color-mix(in srgb, var(--gold) 38%, transparent);
        outline-offset: -2px;
        box-shadow: none;
        transform: none;
    }

    .header-settings__item > svg,
    .header-settings__item .theme-button__icon svg,
    .header-settings__language-icon {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .header-settings__label {
        display: inline;
        min-width: 0;
    }

    .urdu-site .site-nav .header-settings__item {
        font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif;
        line-height: 1.9;
    }

    html[data-theme="night"] .header-settings__toggle {
        border-color: #3a4660;
        background: linear-gradient(180deg, #252d3e, #1c2230);
        color: #f2ca50;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
    }

    html[data-theme="night"] .site-nav .header-settings__menu {
        background: rgba(23, 28, 39, .97);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
    }

    html[data-theme="night"] .site-nav .header-settings__item:is(:hover, :focus-visible) {
        background: rgba(212, 175, 55, .12);
        color: var(--gold-light);
    }
}

@media (min-width: 641px) {
    .urdu-nav .header-settings__menu {
        order: 2;
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top-button {
        transition: none;
    }

    .scroll-top-button__progress-value {
        transition: none;
    }
}