/* Shared by the public layout and the standalone AI/account pages. */
@font-face {
    font-family: 'Shamela Header';
    src: url('DroidArabicKufiBold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root { --site-brand-color: #76542e; }
body.night { --site-brand-color: #c9a77f; }

/* Legacy theme rules use !important for translucent and night headers. */
#header #topNav a.logo,
#header #topNav .site-contribution-link > a,
.site-header .site-brand,
.site-header .site-contribution-link > a {
    color: var(--site-brand-color) !important;
    font-family: 'Shamela Header', Tahoma, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.site-brand-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    direction: rtl;
}

#header #topNav > .container {
    display: flex;
    align-items: center;
    gap: 16px;
    direction: rtl;
    min-height: 60px;
}

#header #topNav > .container::before,
#header #topNav > .container::after {
    display: none;
}

#header #topNav a.logo {
    padding: 0;
    margin: 0;
}

#header #topNav .nav-main-collapse {
    order: 2;
    flex: 1 1 auto;
    padding: 0;
}

#header #topNav ul.nav-second-main {
    order: 3;
    display: flex;
    align-items: center !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    margin-inline-start: auto;
}

#header #topNav ul.nav-second-main > li { margin-inline: 0; }

#header #topNav .site-contribution-link,
.site-header .site-contribution-link {
    display: block;
}

#header #topNav .site-brand-group .btn-mobile {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: 32px;
}

@media (max-width: 992px) {
    #header #topNav > .container { gap: 8px; }
    #header #topNav .nav-main-collapse {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        background: #fff;
    }
    body.night #header #topNav .nav-main-collapse { background: #000; }
}

@media (min-width: 993px) and (max-width: 1199px) {
    #header #topNav #topMain > li > a {
        font-size: 13px;
        padding-inline: 8px;
    }
}

@media (max-width: 800px) {
    .site-header-inner { gap: 0 8px; }
    .site-header .site-controls a,
    .site-header .site-night-mode { padding-inline: 6px; }
}

/* Keep both labels at the same size even on the narrowest phones. */
@media (max-width: 420px) {
    #header #topNav > .container,
    .site-header-inner { padding-inline: 6px; }
    .site-brand-group { gap: 4px; }
    #header #topNav > .container { gap: 4px; }
    #header #topNav ul.nav-second-main > li > a { padding-inline: 4px; }
    .site-header .site-menu-button { width: 32px; }
    .site-header .site-controls { gap: 0; }
    .site-header .site-controls a,
    .site-header .site-night-mode { padding-inline: 4px; }
}

@media (max-width: 360px) {
    #header #topNav > .container,
    .site-header-inner { padding-inline: 4px; gap: 0 4px; }
    #header #topNav .site-brand-group .btn-mobile,
    .site-header .site-menu-button { width: 24px; }
    #header #topNav ul.nav-second-main > li:not(.site-contribution-link) > a,
    .site-header .site-controls li:not(.site-contribution-link) > a,
    .site-header .site-night-mode { padding-inline: 0; }
}