.header-settings {
    display: contents;
}

.header-menu-navigation,
.header-menu-settings-heading {
    display: none;
}

.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;
}

.header-language-picker {
    position: relative;
    min-width: 0;
}

.header-language-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 100px;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg2) 92%, var(--gold) 8%);
    color: var(--text);
    font-family: Cairo, sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.header-language-picker__trigger::-webkit-details-marker { display: none; }

.header-language-picker__trigger:is(:hover, :focus-visible),
.header-language-picker[open] .header-language-picker__trigger {
    border-color: var(--gold);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, .12);
}

.header-language-picker__trigger .header-settings__language-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.header-language-picker__chevron {
    width: 6px;
    height: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}

.header-language-picker[open] .header-language-picker__chevron {
    transform: rotate(225deg) translateY(-2px);
}

.header-language-picker__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    display: grid;
    gap: 3px;
    min-width: 144px;
    padding: 6px;
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background: var(--bg);
    box-shadow: var(--shadow-md);
}

.header-language-picker:not([open]) .header-language-picker__list { display: none; }

.header-language-picker__list a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--text);
    font: 700 13px/1.5 Cairo, sans-serif;
    text-decoration: none;
}

.header-language-picker__list a[lang="ur"] {
    font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif;
    line-height: 1.8;
}

.header-language-picker__list a:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--gold) 14%, var(--bg2));
    color: var(--gold-deep);
    outline: 2px solid var(--border-gold);
    outline-offset: -2px;
}

html[data-theme="night"] .header-language-picker__trigger {
    background: rgba(35, 43, 59, .94);
}

html[data-theme="night"] .header-language-picker__list a:is(:hover, :focus-visible) {
    color: var(--gold-light);
}

.urdu-site .header-language-picker__trigger {
    font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif;
    line-height: 1.8;
}

.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: #626b78;
        font-weight: 700;
    }

    .mobile-tools-link img {
        opacity: 1;
        filter: invert(43%) sepia(8%) saturate(497%) hue-rotate(177deg) brightness(93%) contrast(87%);
    }

    .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;
        font-weight: 800;
        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);
    }

    .mobile-tools-link.is-active img {
        filter: invert(42%) sepia(73%) saturate(667%) hue-rotate(9deg) brightness(88%) contrast(96%);
    }

    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: #edf2fa;
    }

    html[data-theme="night"] .mobile-tools-link img {
        filter: invert(91%) sepia(7%) saturate(237%) hue-rotate(182deg) brightness(105%) contrast(96%);
    }

    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: #fff7cf;
        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);
    }

    html[data-theme="night"] .mobile-tools-link.is-active img {
        filter: invert(86%) sepia(56%) saturate(548%) hue-rotate(347deg) brightness(106%) contrast(101%);
    }

    .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: 44px;
        height: 44px;
        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: min(340px, calc(100vw - 24px));
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg);
        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;
    }

    .header-menu-navigation { display: block; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
    .header-menu-settings-heading { display: block; }
    .site-nav .header-menu-navigation nav {
        position: static;
        z-index: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
    .header-menu-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .header-menu-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .header-menu-heading { margin: 10px 10px 4px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
    .header-menu-tools-list { margin-top: 4px; }
    .header-menu-tools-list:not([open]) .header-menu-tools { display: none; }
    .header-menu-tools-list[open] > .header-menu-tools { margin-top: 4px; padding-inline-start: 10px; border-inline-start: 1px solid var(--border); }
    .header-menu-tools-toggle {
        display: flex; align-items: center; gap: 10px; min-height: 44px;
        padding: 8px 10px; border-radius: 10px; color: var(--text);
        font: 800 13px/1.4 Cairo, sans-serif; cursor: pointer; list-style: none;
    }
    .header-menu-tools-toggle::-webkit-details-marker { display: none; }
    .header-menu-tools-toggle .header-language-picker__chevron { margin-inline-start: auto; }
    .header-menu-tools-list[open] > summary .header-language-picker__chevron { transform: rotate(225deg) translateY(-2px); }
    .header-menu-tools-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .header-menu-tools-toggle:is(:hover, :focus-visible) { background: var(--bg2); outline: 2px solid var(--border-gold); outline-offset: -2px; }
    .urdu-site:not(.english-site) .header-menu-tools-toggle { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif; line-height: 1.9; }
    .header-menu-navigation .header-settings__item { min-width: 0; }
    .header-menu-tools .header-settings__item span { min-width: 0; overflow-wrap: anywhere; }
    .header-menu-navigation .header-settings__item[aria-current="page"] { background: var(--bg2); color: var(--gold-dark); }
    .header-menu-tools img { width: 20px; height: 20px; flex: 0 0 20px; }
    html[data-theme="night"] .header-menu-tools img { filter: invert(90%) sepia(10%) saturate(230%) hue-rotate(180deg); }
    .english-site .site-nav .header-settings__menu { direction: ltr; }

    .site-nav .header-settings__item,
    .site-nav .header-settings__item.site-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[hidden] { display: none; }

    .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:not(.english-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: #171c27;
        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;
    }
}

/* Keep every mobile shortcut understandable, even before its icon loads. */
@media (max-width: 700px) {
    .mobile-tools-bar {
        right: 6px;
        left: 6px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .site-nav .header-language-picker {
        width: 100%;
    }

    .site-nav .header-language-picker__trigger {
        justify-content: flex-start;
        min-height: 44px;
        padding: 8px 10px;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 13px;
    }

    .site-nav .header-language-picker__trigger .header-settings__language-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .site-nav .header-language-picker__chevron { margin-inline-start: auto; }

    .site-nav .header-language-picker__list {
        position: static;
        width: 100%;
        min-width: 0;
        margin-bottom: 4px;
        padding: 3px 6px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-nav .header-language-picker__list a {
        min-height: 42px;
        padding-inline: 34px 10px;
    }
}

@media (max-width: 700px) {
    .mobile-tools-link {
        min-height: 60px;
        gap: 3px;
        border-radius: 15px;
        padding: 5px 2px;
        touch-action: manipulation;
    }

    .mobile-tools-link span {
        display: block;
        max-width: 100%;
        font-size: 11px;
        line-height: 1.35;
        white-space: normal;
        text-wrap: balance;
    }

    .mobile-tools-link img {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        pointer-events: none;
    }
}

/* A touch tap must follow the link immediately instead of activating its hover state. */
@media (max-width: 700px) and (hover: none) {
    .mobile-tools-link:not(.is-active):hover,
    html[data-theme="night"] .mobile-tools-link:not(.is-active):hover {
        background: transparent;
    }
}