/* ═══════════════════════════════════════════════════════════════
   KHALIL — style.css  v3  "Light & Warm"
   ───────────────────────────────────────────────────────────────
   Philosophy:
   · Light warm panels — photo bleeds through and sets the mood
   · Dark ink text — zero reading strain, always high contrast
   · Teal labels + gold times — accent, never decoration
   · Desktop locked viewport · Mobile natural scroll · RTL-safe
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   0. DESIGN TOKENS
══════════════════════════════════════════════════════════════ */
:root {
    /* Palette — mirrors styleLoader.css */
    --ivory:        #faf6f0;
    --cream:        #f3ece0;
    --teal:         #5a8c84;
    --teal2:        #7aada4;
    --teal3:        #a8cdc8;
    --gold:         #b8821a;
    --gold2:        #c8920e;
    --gold3:        #e8c97a;
    --terr:         #8b3a1a;
    --ink:          #1e1510;
    --ink2:         #3d2e20;
    --ink3:         #5a4535;
    --muted:        #7a6855;
    --soft:         #b0a090;

    /* Light glass system — warm ivory at ~45% */
    --glass-panel:  rgba(250, 246, 240, 0.46);
    --glass-header: rgba(245, 240, 232, 0.52);
    --glass-border: rgba(90, 140, 132, 0.20);
    --glass-hover:  rgba(90, 140, 132, 0.10);
    --glass-active: rgba(90, 140, 132, 0.18);
    --glass-row:    rgba(250, 246, 240, 0.30);

    /* Text — dark ink, never white */
    --text-main:    #1e1510;
    --text-sub:     #4a3828;
    --text-muted:   #7a6855;
    --text-teal:    #3d7870;
    --text-gold:    #8a5c08;

    /* Layout */
    --header-h:     66px;
    --banner-h:     28vh;
    --radius:       12px;
    --radius-sm:    8px;
    --radius-xs:    5px;

    /* Motion */
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --t-fast:       0.15s;
    --t-base:       0.25s;

    /* Blur */
    --blur-bg:      26px;
    --blur-panel:   18px;
}

/* ══════════════════════════════════════════════════════════════
   1. RESET & BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
    color: var(--text-main);
    background: #e8e0d4;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

li { list-style: none; }
button { cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--teal2);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 3px; height: 3px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: var(--teal3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal2); }
*                               { scrollbar-width: thin; scrollbar-color: var(--teal3) transparent; }

::selection {
    background: rgba(90, 140, 132, 0.22);
    color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   2. BACKGROUND SYSTEM
   Photo is always visible through warm ivory glass panels.
   Night photos → panels feel cooler/dimmer. Day → warmer/brighter.
   That's the design — don't fight it.
══════════════════════════════════════════════════════════════ */
.wrapperBackground {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #c8bfb0;
    background-position: center;
    background-size: cover;
    transition: opacity 0.6s var(--ease);
    will-change: opacity;
}

/* Very light warm veil — just enough to keep panels readable */
.background {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    backdrop-filter: blur(var(--blur-bg));
    -webkit-backdrop-filter: blur(var(--blur-bg));

    /* Light warm wash — not opaque, lets photo color influence the UI */
    background: linear-gradient(
        158deg,
        rgba(250, 244, 234, 0.38) 0%,
        rgba(245, 238, 226, 0.30) 50%,
        rgba(240, 230, 215, 0.36) 100%
    );
}

.img.changeableBG,
.wrapperBackground.changeableBG {
    background-color: #c8bfb0;
}

/* ══════════════════════════════════════════════════════════════
   3. PRAYER TIME POPUP  (detail in styleV2.css)
══════════════════════════════════════════════════════════════ */
.itsPrayerTimePopUp {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(30, 21, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════════════
   4. HEADER
══════════════════════════════════════════════════════════════ */
.headerBar {
    position: relative;
    z-index: 10;
    width: 100%;
    height: var(--header-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.4rem;

    background: var(--glass-header);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    /* Warm gold shimmer top, teal hint bottom */
    box-shadow:
        inset 0  1px 0 rgba(184, 130, 26, 0.18),
        inset 0 -1px 0 rgba(90, 140, 132, 0.18),
        0 2px 20px rgba(30, 21, 16, 0.12);
}

.leftHeaderBar {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.mosqueIcon {
    width: 2.6rem;
    height: 2.2rem;
    flex-shrink: 0;
    background-image: url(../IMG/MOSQUE_BG/mosque.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* Teal glow — visible on both light/dark photos */
    filter: drop-shadow(0 0 6px rgba(90, 140, 132, 0.5));
    transition: filter var(--t-base) var(--ease);
}
.mosqueIcon:hover {
    filter: drop-shadow(0 0 10px rgba(184, 130, 26, 0.55));
}

.settingsButton {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 140, 132, 0.12);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--ink3);
    font-size: 1rem;
    transition:
        background var(--t-base) var(--ease),
        color var(--t-base) var(--ease),
        transform var(--t-base) var(--ease),
        border-color var(--t-base) var(--ease);
}
.settingsButton:hover {
    background: rgba(90, 140, 132, 0.22);
    border-color: var(--teal);
    color: var(--ink);
    transform: rotate(60deg);
}
.settingsButton:active { transform: rotate(90deg) scale(0.9); }

/* ══════════════════════════════════════════════════════════════
   5. MAIN LAYOUT SHELL
══════════════════════════════════════════════════════════════ */
.main {
    width: 84%;
    height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   6. IMAGE / DATE BANNER
══════════════════════════════════════════════════════════════ */
.timeInfos {
    width: 100%;
    height: var(--banner-h);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.img {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 0.6s var(--ease);
    will-change: opacity;
}

/* Left veil: date text always readable against any photo */
.img::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(20, 14, 8, 0.62) 0%,
            rgba(20, 14, 8, 0.22) 45%,
            transparent 100%
        ),
        linear-gradient(to top,
            rgba(20, 14, 8, 0.45) 0%,
            transparent 55%
        );
    pointer-events: none;
    z-index: 1;
}

[dir="rtl"] .img::after {
    background:
        linear-gradient(to left,
            rgba(20, 14, 8, 0.62) 0%,
            rgba(20, 14, 8, 0.22) 45%,
            transparent 100%
        ),
        linear-gradient(to top,
            rgba(20, 14, 8, 0.45) 0%,
            transparent 55%
        );
}

/* Date text — always white on the dark veil */
.temporalInfo {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(13px, 1.5vw, 19px);
    font-weight: 300;
    /* White here is fine — it sits on the dark veil, not the panel */
    color: rgba(250, 246, 240, 0.95);
    letter-spacing: .05em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
    animation: fadeSlideIn .6s var(--ease) both;
}
[dir="rtl"] .temporalInfo { left: auto; right: 5%; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(calc(-50% + 8px)); }
    to   { opacity: 1; transform: translateY(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   7. CONTENT COLUMNS
══════════════════════════════════════════════════════════════ */
.mainContent {
    flex: 1;
    display: flex;
    min-height: 0;
    gap: 1px;
    /* The gap colour — subtle teal line between columns */
    background: rgba(90, 140, 132, 0.22);
}

.mainContent > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Warm ivory glass — the photo bleeds through */
    background: var(--glass-panel);
    backdrop-filter: blur(var(--blur-panel));
    -webkit-backdrop-filter: blur(var(--blur-panel));
}

.left  { border-left:  1px solid var(--glass-border); }
.right { border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════════
   8. LEFT COLUMN — INFO + PRAYER TIMES
══════════════════════════════════════════════════════════════ */
.left .infos {
    flex-shrink: 0;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    /* Whisper of warm gold at top */
    background: linear-gradient(
        180deg,
        rgba(184, 130, 26, 0.06) 0%,
        transparent 100%
    );
}

/* Current time */
.currentTime { display: flex; flex-direction: column; gap: .05rem; }

#currentTime {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 300;
    color: var(--ink);
    letter-spacing: .07em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Next prayer block */
.nextPrayer { display: flex; flex-direction: column; gap: .25rem; }

.next-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
}

.nextPrayer h3,
.next-row strong {
    font-family: 'Cinzel', serif;
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 500;
    color: var(--text-teal);
    letter-spacing: .06em;
}

.nextPrayer p,
.next-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--text-gold);
}

#nextPrayer     { color: var(--text-teal); font-family: 'Cinzel', serif; }
#nextPrayerTime { color: var(--text-gold); font-family: 'Cormorant Garamond', serif; }

.countdown-row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }

#remainingPrayerTime {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(15px, 1.6vw, 20px);
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* ── Prayer times list ──────────────────────────────────────── */
.left .prayerTimes {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.prayerTimes ul,
.prayerTimes {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0;
    margin: 0;
}

.prayerTimes li,
.prayer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem 1.5rem;
    font-family: 'Cinzel', serif;
    font-size: clamp(12px, 1.2vw, 14px);
    letter-spacing: .06em;
    color: var(--text-sub);
    border-bottom: 1px solid rgba(90, 140, 132, 0.10);
    transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    cursor: default;
    position: relative;
}

/* Remove old alternating background */
.prayerTimes li:nth-child(odd) { background-color: transparent; }

.prayerTimes li:hover,
.prayer:hover {
    background: rgba(250, 246, 240, 0.35);
    color: var(--ink);
}

/* ── Next prayer highlight ──────────────────────────────────── */
.prayer.active-prayer {
    background: rgba(90, 140, 132, 0.12);
    color: var(--ink);
}

/* Teal left accent bar with glow */
.prayer.active-prayer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--teal2);
    box-shadow: 0 0 8px rgba(90, 140, 132, 0.5);
}
[dir="rtl"] .prayer.active-prayer::before {
    left: auto;
    right: 0;
    border-radius: 2px 0 0 2px;
}

.prayer-label {
    font-family: 'Cinzel', serif;
    font-size: clamp(11px, 1.1vw, 13px);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: inherit;
}

/* Time badge */
.prayer-time,
.prayerTimes li span {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 400;
    color: var(--text-gold);
    background: rgba(184, 130, 26, 0.09);
    border: 1px solid rgba(184, 130, 26, 0.20);
    padding: .2rem .85rem;
    border-radius: 20px;
    letter-spacing: .04em;
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}

.prayer:hover .prayer-time,
.prayerTimes li:hover span {
    background: rgba(184, 130, 26, 0.15);
    border-color: rgba(184, 130, 26, 0.32);
}

/* Active prayer — badge gets a warm glow */
.prayer.active-prayer .prayer-time {
    background: rgba(90, 140, 132, 0.14);
    border-color: rgba(90, 140, 132, 0.40);
    color: var(--text-teal);
    box-shadow: 0 0 10px rgba(90, 140, 132, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   9. RIGHT COLUMN — CALENDAR + FEATURES
══════════════════════════════════════════════════════════════ */
.right .calendar-section,
.right .callendar {
    flex-shrink: 0;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
    min-height: 180px;
}

/* Legacy text fallback */
.right .callendar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: .75rem;
    color: var(--text-muted);
    letter-spacing: .1em;
}

/* Feature section */
.right .featureSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .3rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.right .features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .45rem;
    padding: .35rem .75rem;
    width: 100%;
}

/* ── Feature buttons ────────────────────────────────────────── */
.featureButton button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    width: 100%;
    aspect-ratio: 1;
    min-height: 60px;

    /* Light warm tile */
    background: rgba(250, 246, 240, 0.45);
    border: 1px solid rgba(90, 140, 132, 0.18);
    border-radius: var(--radius-sm);
    color: var(--text-sub);

    font-family: 'Cinzel', serif;
    font-size: .55rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;

    -webkit-tap-highlight-color: transparent;
    transition:
        background  var(--t-base) var(--ease),
        border-color var(--t-base) var(--ease),
        transform   var(--t-base) var(--ease-spring),
        box-shadow  var(--t-base) var(--ease),
        color       var(--t-base) var(--ease);
}

.featureButton button i {
    font-size: 1.05rem;
    color: var(--teal2);
    transition:
        color var(--t-base) var(--ease),
        transform var(--t-base) var(--ease-spring);
}

.featureButton button span {
    color: var(--text-muted);
    font-size: .52rem;
    transition: color var(--t-base) var(--ease);
}

.featureButton button:hover {
    background: rgba(250, 246, 240, 0.72);
    border-color: var(--teal);
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow:
        0 6px 20px rgba(30, 21, 16, 0.14),
        0 0 0 1px rgba(90, 140, 132, 0.10) inset;
}
.featureButton button:hover i    { color: var(--gold); transform: scale(1.1); }
.featureButton button:hover span { color: var(--text-sub); }
.featureButton button:active     {
    transform: translateY(0) scale(0.96);
    box-shadow: none;
    background: rgba(90, 140, 132, 0.14);
}

@media (hover: none) {
    .featureButton button:active {
        background: rgba(90, 140, 132, 0.14);
        border-color: var(--teal);
    }
}

/* ══════════════════════════════════════════════════════════════
   10. SHARED ELEMENTS
══════════════════════════════════════════════════════════════ */
hr, .section-divider {
    flex-shrink: 0;
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 0;
}

.time-label,
.next-label,
.countdown-label,
.cal-label {
    font-family: 'Cinzel', serif;
    font-size: clamp(9px, .8vw, 11px);
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cal-label { margin-inline-end: .3rem; }

/* ══════════════════════════════════════════════════════════════
   11. RTL
══════════════════════════════════════════════════════════════ */
[dir="rtl"] body  { font-family: 'Amiri', 'Cormorant Garamond', serif; }
[dir="rtl"] .left  { border-left: none; border-right: 1px solid var(--glass-border); }
[dir="rtl"] .right { border-right: none; border-left: 1px solid var(--glass-border); }

/* ══════════════════════════════════════════════════════════════
   12. RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* Large desktop */
@media screen and (min-width: 1400px) {
    .main { width: 78%; }
    :root { --banner-h: 26vh; }
}

@media screen and (max-width: 1280px) { .main { width: 88%; } }
@media screen and (max-width: 1100px) { .main { width: 94%; } }

/* Tablet landscape */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    :root { --header-h: 60px; --banner-h: 24vh; }
    .main { width: 96%; }
    .right .features { gap: .35rem; padding: .3rem .6rem; }
    .featureButton button { min-height: 52px; }
}

/* ── Tablet portrait + mobile ───────────────────────────────── */
@media screen and (max-width: 768px) {
    :root {
        --header-h: 54px;
        --banner-h: 200px;
    }

    /* Unlock natural scroll */
    body {
        overflow: visible !important;
    }

    /* Photo stays fixed — acts as wallpaper while content scrolls */
    .wrapperBackground {
        position: fixed;
        background-attachment: scroll; /* iOS fixed-bg bug fix */
    }

    /* Overlay grows with content */
    .background {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    /* Sticky header — always reachable */
    .headerBar {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0 1.1rem;
    }

    /* Main grows to content */
    .main {
        width: 100%;
        height: auto;
        min-height: calc(100dvh - var(--header-h));
        overflow: visible;
    }

    /* Banner */
    .timeInfos { height: var(--banner-h); flex-shrink: 0; }

    /* Columns stack */
    .mainContent {
        flex-direction: column;
        gap: 0;
        background: transparent;
        min-height: 0;
    }

    .mainContent > div {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        flex-shrink: 0;
    }

    /* Prayer list — full height, no inner scroll */
    .left .prayerTimes { overflow: visible; height: auto; }
    .prayerTimes ul, .prayerTimes { height: auto; justify-content: flex-start; }
    .prayerTimes li, .prayer { padding: .75rem 1.1rem; }

    /* Column borders */
    .left  { border-left: none; border-right: none; border-bottom: 1px solid var(--glass-border); }
    .right { border-right: none; border-top: 1px solid var(--glass-border); }

    /* Calendar */
    .right .calendar-section,
    .right .callendar { min-height: 160px; }

    /* Features — natural height */
    .right .featureSection {
        overflow: visible;
        height: auto;
        flex: unset;
        padding: .4rem 0 1rem;
    }
    .right .features { grid-template-columns: repeat(5, 1fr); gap: .4rem; padding: .3rem .6rem; }
    .featureButton button { min-height: 58px; font-size: .54rem; border-radius: var(--radius-xs); }
    .featureButton button i { font-size: 1rem; }

    .left .infos { padding: 1rem 1.1rem; }
    #currentTime { font-size: 28px; }
}

/* Small mobile */
@media screen and (max-width: 480px) {
    :root { --banner-h: 170px; }

    .headerBar { padding: 0 .9rem; }

    .right .features {
        grid-template-columns: repeat(4, 1fr);
        gap: .35rem;
        padding: .3rem .5rem;
    }

    .featureButton button { min-height: 62px; }
    .temporalInfo { font-size: 12px; gap: .25rem; }
    #currentTime { font-size: 24px; }
    .prayerTimes li, .prayer { padding: .65rem .9rem; }
}

/* Very small */
@media screen and (max-width: 360px) {
    .right .features { grid-template-columns: repeat(3, 1fr); }
    .featureButton button { font-size: .5rem; }
}

/* ══════════════════════════════════════════════════════════════
   13. REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}