/* =========================================================
   TOP STATUS BAR — Time + Date + Weather + Welcome
   FULLY RESPONSIVE — Desktop, Tablet, Mobile
   INTEGRATED with navbar so they never overlap.
   ========================================================= */

/* =========================================================
   LAYOUT VARIABLES
   ========================================================= */
:root {
    --dau-status-height: 38px;
    --dau-nav-height: var(--nav-h, 84px);
    --dau-nav-h-total: calc(var(--dau-nav-height) + var(--dau-status-height));

    /* Mobile navbar height — used to position the welcome pill
       safely BELOW the navbar controls */
    --dau-mobile-nav-h: 72px;
}

@media (max-width: 1023px) {
    :root { --dau-status-height: 36px; }
}

@media (max-width: 767px) {
    :root {
        --dau-status-height: 34px;
        --dau-mobile-nav-h: 72px;
    }
}

@media (max-width: 479px) {
    :root {
        --dau-status-height: 32px;
        --dau-mobile-nav-h: 68px;
    }
}

@media (max-width: 359px) {
    :root {
        --dau-status-height: 30px;
        --dau-mobile-nav-h: 64px;
    }
}

/* =========================================================
   THE STATUS BAR
   ========================================================= */
.dau-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;

    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--dau-status-height);
    padding: 0 16px;

    background: linear-gradient(90deg,
        rgba(0, 229, 255, 0.08) 0%,
        rgba(168, 85, 247, 0.08) 50%,
        rgba(0, 229, 255, 0.08) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);

    font-family: 'Sora', 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--text-0, #e8ecf5);

    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    pointer-events: none;

    /* iPhone notch safety */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.dau-status.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---------- Shimmer line at bottom of bar ---------- */
.dau-status::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.5) 25%,
        rgba(168, 85, 247, 0.5) 50%,
        rgba(0, 229, 255, 0.5) 75%,
        transparent 100%);
    background-size: 200% 100%;
    animation: dauStatusShimmer 6s linear infinite;
    opacity: 0.6;
}

@keyframes dauStatusShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.dau-status__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    min-width: 0;
}

/* =========================================================
   WEATHER SECTION
   ========================================================= */
.dau-status__weather {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
    cursor: default;
}

.dau-status__weather-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    position: relative;
}

.dau-status__weather-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.dau-status__weather-temp {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

.dau-status__weather-city {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    min-width: 0;
}

/* =========================================================
   WELCOME MESSAGE — Flowing center text
   ========================================================= */
.dau-status__welcome {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: 100%;
    margin: 0 12px;
    pointer-events: none;
}

.dau-status__welcome-text {
    display: inline-block;
    font-family: 'Sora', 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

    /* Animated gradient text */
    background: linear-gradient(90deg,
        #ffffff 0%,
        #00e5ff 30%,
        #a855f7 50%,
        #00e5ff 70%,
        #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: dauWelcomeShine 4s linear infinite;
}

.dau-status__welcome-text.is-shown {
    opacity: 1;
    transform: translateY(0);
}

.dau-status__welcome-text.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

@keyframes dauWelcomeShine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Light theme welcome text */
[data-theme="light"] .dau-status__welcome-text {
    background: linear-gradient(90deg,
        #0b0e17 0%,
        #0077ff 30%,
        #7c3aed 50%,
        #0077ff 70%,
        #0b0e17 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   DIVIDER
   ========================================================= */
.dau-status__divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* =========================================================
   TIME SECTION
   ========================================================= */
.dau-status__time {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 0;
}

.dau-status__clock {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: #00e5ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.dau-status__date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   WEATHER ICONS — ANIMATED
   ========================================================= */
.dau-wx {
    position: relative;
    width: 26px;
    height: 26px;
}

/* ---------- SUN ---------- */
.dau-wx__sun {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.dau-wx__sun-core {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe680, #ffb300 70%);
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.7), 0 0 4px rgba(255, 200, 0, 0.9);
    z-index: 2;
}

.dau-wx__sun-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg, rgba(255, 200, 0, 0.85) 5deg, transparent 10deg,
            transparent 40deg, rgba(255, 200, 0, 0.85) 45deg, transparent 50deg,
            transparent 80deg, rgba(255, 200, 0, 0.85) 85deg, transparent 90deg,
            transparent 120deg, rgba(255, 200, 0, 0.85) 125deg, transparent 130deg,
            transparent 160deg, rgba(255, 200, 0, 0.85) 165deg, transparent 170deg,
            transparent 200deg, rgba(255, 200, 0, 0.85) 205deg, transparent 210deg,
            transparent 240deg, rgba(255, 200, 0, 0.85) 245deg, transparent 250deg,
            transparent 280deg, rgba(255, 200, 0, 0.85) 285deg, transparent 290deg,
            transparent 320deg, rgba(255, 200, 0, 0.85) 325deg, transparent 330deg
        );
    -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px, #000 11px, transparent 12px);
    mask: radial-gradient(circle, transparent 8px, #000 9px, #000 11px, transparent 12px);
    animation: dauSunRotate 12s linear infinite;
    filter: blur(0.2px);
}

.dau-wx__sun--mini .dau-wx__sun-core {
    width: 9px;
    height: 9px;
}

.dau-wx__sun--mini {
    transform: translate(-3px, -3px) scale(0.75);
}

@keyframes dauSunRotate {
    to { transform: rotate(360deg); }
}

/* ---------- CLOUD ---------- */
.dau-wx__cloud {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    animation: dauCloudFloat 4s ease-in-out infinite;
}

.dau-wx__cloud span {
    position: absolute;
    background: linear-gradient(180deg, #f0f4fa 0%, #c7d0dc 100%);
    border-radius: 50%;
    box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.08);
}

.dau-wx__cloud span:nth-child(1) { width: 12px; height: 12px; left: 0; bottom: 0; }
.dau-wx__cloud span:nth-child(2) { width: 14px; height: 14px; left: 5px; bottom: 1px; }
.dau-wx__cloud span:nth-child(3) { width: 11px; height: 11px; right: 0; bottom: 0; }

.dau-wx__cloud--front {
    z-index: 3;
    animation: dauCloudFloatSlow 5s ease-in-out infinite;
}

.dau-wx__cloud--soft { opacity: 0.75; }

.dau-wx__cloud--dark span {
    background: linear-gradient(180deg, #6b7480 0%, #444c56 100%);
}

@keyframes dauCloudFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-1.5px); }
}

@keyframes dauCloudFloatSlow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-1px); }
}

/* ---------- RAIN ---------- */
.dau-wx__rain {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 8px;
}

.dau-wx__rain span {
    position: absolute;
    width: 1.5px;
    height: 5px;
    background: linear-gradient(180deg, rgba(120, 200, 255, 0) 0%, #7cc8ff 100%);
    border-radius: 1px;
    animation: dauRainDrop 1.2s linear infinite;
    opacity: 0.85;
}

.dau-wx__rain span:nth-child(1) { left: 3px;  animation-delay: 0s; }
.dau-wx__rain span:nth-child(2) { left: 8px;  animation-delay: 0.2s; }
.dau-wx__rain span:nth-child(3) { left: 13px; animation-delay: 0.4s; }
.dau-wx__rain span:nth-child(4) { left: 17px; animation-delay: 0.6s; }

@keyframes dauRainDrop {
    0%   { transform: translateY(-4px); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(7px); opacity: 0; }
}

.dau-wx--drizzle .dau-wx__rain span {
    height: 3px;
    width: 1px;
    animation-duration: 1.6s;
}

/* ---------- SNOW ---------- */
.dau-wx__snow {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 9px;
}

.dau-wx__snow span {
    position: absolute;
    font-size: 6px;
    color: #dff2ff;
    animation: dauSnowFall 2s linear infinite;
    opacity: 0.9;
}

.dau-wx__snow span:nth-child(1) { left: 3px;  animation-delay: 0s; }
.dau-wx__snow span:nth-child(2) { left: 10px; animation-delay: 0.5s; }
.dau-wx__snow span:nth-child(3) { left: 16px; animation-delay: 1s; }

@keyframes dauSnowFall {
    0%   { transform: translateY(-5px) rotate(0deg); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(8px) rotate(180deg); opacity: 0; }
}

/* ---------- THUNDER ---------- */
.dau-wx__lightning {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    filter: drop-shadow(0 0 4px #ffd700);
    animation: dauLightning 2.4s steps(1) infinite;
    z-index: 4;
}

@keyframes dauLightning {
    0%, 84%, 100% { opacity: 0; }
    85%, 88%      { opacity: 1; }
    86%, 89%      { opacity: 0.3; }
    87%, 90%      { opacity: 1; }
}

/* ---------- FOG ---------- */
.dau-wx__fog-lines {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.dau-wx__fog-lines span {
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    border-radius: 1px;
    animation: dauFogSlide 3s ease-in-out infinite;
}

.dau-wx__fog-lines span:nth-child(1) { width: 100%; animation-delay: 0s; }
.dau-wx__fog-lines span:nth-child(2) { width: 80%;  animation-delay: 0.3s; }
.dau-wx__fog-lines span:nth-child(3) { width: 90%;  animation-delay: 0.6s; }

@keyframes dauFogSlide {
    0%, 100% { transform: translateX(-3px); opacity: 0.5; }
    50%      { transform: translateX(3px);  opacity: 1; }
}

/* ---------- LOADING DOT ---------- */
.dau-wx--loading {
    display: grid;
    place-items: center;
}

.dau-wx__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
    animation: dauLoadingPulse 1.4s ease-in-out infinite;
}

@keyframes dauLoadingPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50%      { transform: scale(1.2); opacity: 1; }
}

/* =========================================================
   LIGHT THEME
   ========================================================= */
[data-theme="light"] .dau-status {
    background: linear-gradient(90deg,
        rgba(0, 119, 255, 0.06) 0%,
        rgba(124, 58, 237, 0.06) 50%,
        rgba(0, 119, 255, 0.06) 100%);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: #0b0e17;
}

[data-theme="light"] .dau-status__weather-temp { color: #0b0e17; }
[data-theme="light"] .dau-status__weather-city { color: rgba(0, 0, 0, 0.6); }
[data-theme="light"] .dau-status__date         { color: rgba(0, 0, 0, 0.65); }
[data-theme="light"] .dau-status__clock {
    color: #0077ff;
    text-shadow: 0 0 12px rgba(0, 119, 255, 0.25);
}
[data-theme="light"] .dau-status__divider { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .dau-wx__cloud span {
    background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%);
}
[data-theme="light"] .dau-status::after { opacity: 0.35; }

/* =========================================================
   RTL (ARABIC)
   ========================================================= */
[dir="rtl"] .dau-status__inner { flex-direction: row-reverse; }
[dir="rtl"] .dau-status__weather,
[dir="rtl"] .dau-status__time { flex-direction: row-reverse; }

/* =========================================================
   RESPONSIVE — TABLET (768px – 1023px)
   Welcome stays INSIDE the bar, just smaller.
   ========================================================= */
@media (max-width: 1023px) {
    .dau-status {
        padding: 0 14px;
        font-size: 0.74rem;
    }
    .dau-status__weather-city { max-width: 110px; }

    /* Welcome stays visible but shrinks */
    .dau-status__welcome {
        display: flex;
        margin: 0 8px;
        flex: 1;
        min-width: 0;
    }

    .dau-status__welcome-text {
        font-size: 0.7rem;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE LARGE (480px – 767px)
   Welcome becomes a floating pill BELOW the NAVBAR
   so it never overlaps theme/lang/hamburger controls.
   ========================================================= */
@media (max-width: 767px) {
    .dau-status {
        padding: 0 12px;
        font-size: 0.72rem;
    }
    .dau-status__inner { gap: 8px; }
    .dau-status__weather { gap: 6px; }
    .dau-status__weather-icon { width: 22px; height: 22px; }
    .dau-wx { width: 22px; height: 22px; }
    .dau-status__weather-temp { font-size: 0.76rem; }
    .dau-status__weather-city { display: none; }
    .dau-status__divider { display: none; }
    .dau-status__time { gap: 8px; }
    .dau-status__clock { font-size: 0.76rem; }
    .dau-status__date {
        font-size: 0.66rem;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ==== Welcome becomes a floating pill BELOW THE NAVBAR ==== */
    .dau-status__welcome {
        display: block;
        position: fixed;

        /* Status bar + mobile navbar + a small gap.
           This pushes the pill below the theme/lang/hamburger
           controls so they are never covered. */
        top: calc(var(--dau-status-height) + var(--dau-mobile-nav-h) + 6px);

        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 6px 14px;
        max-width: calc(100vw - 32px);
        background: rgba(10, 14, 26, 0.78);
        border: 1px solid rgba(0, 229, 255, 0.22);
        border-radius: 999px;
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
                    0 0 20px rgba(0, 229, 255, 0.08);

        /* Decorative only — never blocks taps */
        pointer-events: none;

        /* Sit BELOW navbar controls in stacking order */
        z-index: 90;

        overflow: hidden;
        height: auto;
    }

    .dau-status__welcome-text {
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }
}

/* Light theme mobile pill */
@media (max-width: 767px) {
    [data-theme="light"] .dau-status__welcome {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(0, 119, 255, 0.18);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                    0 0 20px rgba(0, 119, 255, 0.06);
    }
}

/* =========================================================
   RESPONSIVE — MOBILE SMALL (< 480px)
   ========================================================= */
@media (max-width: 479px) {
    .dau-status {
        padding: 0 10px;
        font-size: 0.68rem;
    }
    .dau-status__inner { gap: 6px; }
    .dau-status__weather { gap: 5px; }
    .dau-status__weather-icon { width: 20px; height: 20px; }
    .dau-wx { width: 20px; height: 20px; }
    .dau-status__weather-temp { font-size: 0.72rem; }
    .dau-status__time { gap: 6px; }
    .dau-status__clock {
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }
    .dau-status__date {
        font-size: 0.62rem;
        max-width: 100px;
    }

    /* Smaller welcome pill, still BELOW navbar */
    .dau-status__welcome {
        padding: 5px 12px;
        max-width: calc(100vw - 24px);
        top: calc(var(--dau-status-height) + var(--dau-mobile-nav-h) + 5px);
    }
    .dau-status__welcome-text {
        font-size: 0.66rem;
    }
}

/* =========================================================
   RESPONSIVE — VERY SMALL (< 360px)
   ========================================================= */
@media (max-width: 359px) {
    .dau-status { font-size: 0.64rem; }
    .dau-status__date { display: none; }
    .dau-status__clock { font-size: 0.7rem; }

    /* Tiny welcome pill, still BELOW navbar */
    .dau-status__welcome {
        max-width: calc(100vw - 20px);
        padding: 4px 10px;
        top: calc(var(--dau-status-height) + var(--dau-mobile-nav-h) + 4px);
    }
    .dau-status__welcome-text {
        font-size: 0.62rem;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .dau-wx__sun-rays,
    .dau-wx__cloud,
    .dau-wx__cloud--front,
    .dau-wx__rain span,
    .dau-wx__snow span,
    .dau-wx__lightning,
    .dau-wx__fog-lines span,
    .dau-status::after,
    .dau-wx__dot,
    .dau-status__welcome-text {
        animation: none !important;
    }

    .dau-status__welcome-text {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
}

/* =========================================================
   LAYOUT INTEGRATION — Push NAVBAR & content below the bar
   ========================================================= */

/* Push the NAVBAR down so it sits BELOW the status bar. */
.navbar {
    top: var(--dau-status-height) !important;
}

/* Push body content down by the COMBINED height (status + navbar). */
body {
    padding-top: var(--dau-nav-h-total);
}

/* Remove any old padding-top from page containers. */
.home,
.about-page,
.skills-page,
.exp-page,
.proj-page,
.cert-page,
.svc-page,
.ach-page,
.contact-page,
.e404-page {
    padding-top: 0 !important;
}

/* =========================================================
   FIX: Fullscreen menu (hamburger) must sit BELOW the status bar
   ========================================================= */
.menu {
    z-index: 9998;
}

.menu__inner {
    padding-top: var(--dau-status-height);
}

/* =========================================================
   FIX: AI Bot panel should not clip under the status bar
   ========================================================= */
.dau-bot__panel {
    top: calc(var(--dau-status-height) + 12px);
    max-height: calc(100vh - var(--dau-status-height) - 24px);
}

/* =========================================================
   FIX: Loader should cover everything including the status bar
   ========================================================= */
.loader {
    z-index: 10000;
}

/* =========================================================
   FIX: Scroll FAB
   ========================================================= */
.scroll-fab {
    z-index: 500;
}