/* Place clock nicely inside header nav */
.z-nav {
    display: flex;
    align-items: center;
    gap: 14px
}

.z-nav__clock {
    display: flex;
    align-items: center
}

/* Clock (header minimal) */
.z-clock-nav {
    font-size: 14px;
    line-height: 1.2;
    color: var(--z-muted, rgba(10, 10, 20, .62));
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.z-clock-nav__primary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.z-clock-nav__loc {
    color: var(--z-text, rgba(10, 10, 20, .92));
    font-weight: 600;
}

.z-clock-nav__time {
    color: var(--z-text, rgba(10, 10, 20, .92));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.z-clock-nav__gmt {
    color: var(--z-muted, rgba(10, 10, 20, .62));
    font-variant-numeric: tabular-nums;
}

.z-clock-nav__secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--z-muted, rgba(10, 10, 20, .62));
    font-size: 13px;
}

.z-clock-nav__sep {
    opacity: .6
}

/* Dark mode support */
html[data-theme="dark"] .z-clock-nav {
    color: var(--z-muted, rgba(255, 255, 255, .68));
}

html[data-theme="dark"] .z-clock-nav__loc,
html[data-theme="dark"] .z-clock-nav__time {
    color: var(--z-text, rgba(255, 255, 255, .92));
}

html[data-theme="dark"] .z-clock-nav__gmt,
html[data-theme="dark"] .z-clock-nav__secondary {
    color: var(--z-muted, rgba(255, 255, 255, .68));
}

/* Mobile: 2 lines
   Line 1: Location + Time
   Line 2: Date + Hijri
   GMT hidden
*/
@media (max-width: 820px) {
    .z-nav {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .z-nav__menu {
        order: 1
    }

    .z-nav__clock {
        order: 2
    }

    .z-theme-toggle {
        order: 3
    }

    .z-clock-nav {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .z-clock-nav__primary,
    .z-clock-nav__secondary {
        justify-content: flex-end;
    }

    .z-clock-nav__gmt {
        display: none;
    }
}