/* Zellij theme — fully self-contained (the only stylesheet loaded for this
   theme), so it also carries the shared nav/footer chrome and the classes
   used by includes/notifications.php and includes/zuhrchangebanner.php.
   Palette comes from skins/*.css custom properties (fallbacks inline).

   Layout contract: at 992px+ the board fills the viewport exactly with no
   page scroll (only the Notices panel scrolls internally if it must), and
   type scales with viewport height so a TV renders larger than a laptop.
   Below 992px it's a normal stacked, scrolling page. */

html, body {
    margin: 0;
    padding: 0;
    background: var(--zl-bg, #f6efe2);
    color: var(--zl-ink, #1f2a24);
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
}
body {
    background-image: url("assets/zellij-tile.svg");
    background-size: 80px 80px;
    background-repeat: repeat;
    background-attachment: fixed;
}
a:link, a:visited, a:hover, a:active {
    color: var(--zl-emerald, #0f6b4f);
    text-decoration: none;
}

/* ---------- Nav (shared markup from navigation.php) ---------- */
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--zl-emerald-deep, #0a4f3a);
}
#nav li { float: right; }
/* One shared line-height, no vertical padding: name cell and links are the
   same height, so the active background spans the whole bar. */
#nav li a {
    display: block;
    color: var(--zl-bg, #f6efe2);
    text-align: center;
    padding: 0 14px;
    line-height: 48px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
}
#nav li a:hover:not(.active) { background-color: var(--zl-emerald, #0f6b4f); }
#nav li span { display: block; color: var(--zl-bg, #f6efe2); text-align: center; padding: 0 20px; line-height: 48px; }
#nav .active { background-color: var(--zl-gold, #b98b2c); }
#nav .active a { color: var(--zl-ink, #1f2a24); }
#nav #nav_name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 20px;
    line-height: 48px;
    text-align: left;
}
#nav #myname { width: 500px; float: left; margin: 0 0 0 20px; }

/* Wide screens: the masjid name takes whatever width the links leave and is cut with an ellipsis, instead of
   wrapping onto a second line and making the bar taller (long masjid + area names). */
@media screen and (min-width: 976px) {
    #nav ul { display: flex; flex-direction: row-reverse; align-items: stretch; }
    #nav li { flex: 0 0 auto; }
    #nav #myname { order: 99; flex: 1 1 0; min-width: 0; width: auto; }
    #nav #nav_name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

#toggle { display: none; width: 28px; height: 0; margin: 10px auto; }
#toggle span:after, #toggle span:before { content: ""; position: absolute; left: 0; top: -9px; }
#toggle span:after { top: 9px; }
#toggle span { position: relative; display: block; }
#toggle span, #toggle span:after, #toggle span:before {
    width: 100%;
    height: 3px;
    background-color: var(--zl-emerald, #0f6b4f);
    transition: all .3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
#toggle.on span { background-color: transparent; }
#toggle.on span:before { transform: rotate(45deg) translate(5px, 5px); }
#toggle.on span:after { transform: rotate(-45deg) translate(7px, -8px); }
#toggle.on + #menu { opacity: 1; visibility: visible; }
.show-menu { text-decoration: none; text-align: center; padding: 10px 0; display: none; }
input[type=checkbox] { display: none; }
input[type=checkbox]:checked ~ #menu { display: block; }

@media screen and (max-width: 975px) {
    #nav ul { position: static; display: none; }
    #nav li { margin-bottom: 1px; }
    #nav ul li, #nav li a { width: 100%; }
    .show-menu { display: block; }
    #toggle { display: block; }
    #nav #myname { width: 100%; text-align: center; }
    #nav #nav_name { font-size: 16px; line-height: 36px; }
}

/* ---------- Footer (shared markup from footer.php) — static, never fixed ---------- */
footer.footer {
    width: 100%;
    box-sizing: border-box;
    color: var(--zl-muted, #6b7a72);
    font-size: 13px;
    background-color: var(--zl-bg-deep, #ece1c9);
    border-top: 1px solid var(--zl-line, rgba(15, 107, 79, .28));
    padding: 12px 16px;
    text-align: center;
}
footer.footer a { color: var(--zl-emerald, #0f6b4f); }
footer.footer { position: relative; }
.mb-switchers { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 12px; line-height: 0; }
.mb-switchers a { color: inherit; opacity: .45; }
.mb-switchers a:hover { opacity: 1; }
.mb-switchers svg { width: 18px; height: 18px; display: block; fill: currentColor; }
/* Skins can recolour the gold divider SVG (loaded as <img>) via a filter. */
.zl-divider { filter: var(--zl-ornament-filter, none); }
@media screen and (max-width: 975px) {
    footer.footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 44px; }
    footer.footer .mb-footer-info { display: none; }
}

/* ---------- Board ---------- */
.zl-board {
    max-width: 1900px;
    margin: 0 auto;
    padding: clamp(8px, 1.4vh, 22px) clamp(10px, 1.6vw, 30px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 22px);
}
.zl-hidden { display: none; }
/* Under the header: the board's content, and (large screens, when switched on) the hadith panel beside it. */
.zl-main { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 22px); }
.zl-content {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 22px);
    min-width: 0;
}

/* Header: masjid | clock | dates */
.zl-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 1.5vw, 30px);
    background: var(--zl-emerald, #0f6b4f);
    color: var(--zl-bg, #f6efe2);
    border-radius: 14px;
    padding: clamp(8px, 1.4vh, 20px) clamp(14px, 2vw, 32px);
    box-shadow: 0 8px 22px var(--zl-shadow, rgba(31, 42, 36, .12));
}
.zl-masjid-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vh, 2.5rem);
    line-height: 1.1;
}
.zl-masjid-area {
    font-size: clamp(.8rem, 1.6vh, 1.15rem);
    opacity: .85;
    margin-top: 2px;
}
.zl-clock {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 6.5vh, 5.5rem);
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
}
.zl-dates { text-align: right; }
.zl-date { font-size: clamp(.85rem, 1.8vh, 1.3rem); font-weight: 600; }
.zl-date-hijri { opacity: .85; font-weight: 400; }

/* Hero: next salaah countdown */
.zl-hero { text-align: center; }
.zl-divider { display: block; width: min(60%, 520px); height: clamp(10px, 1.6vh, 18px); margin: 0 auto; }
.zl-hero-row {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .35em .8em;
    margin: clamp(2px, .5vh, 6px) auto;
    padding: clamp(6px, 1vh, 14px) clamp(18px, 2.4vw, 44px);
    font-size: clamp(1.05rem, 2.8vh, 2.2rem);
    background: var(--zl-card, #fffaf0);
    border: 2px solid var(--zl-gold, #b98b2c);
    border-radius: 999px;
    box-shadow: 0 6px 18px var(--zl-shadow, rgba(31, 42, 36, .12));
}
.zl-hero-label {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .6em;
    font-weight: 700;
    color: var(--zl-emerald-deep, #0a4f3a);
}
.zl-hero-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.5em;
    color: var(--zl-emerald, #0f6b4f);
}
.zl-hero-name small { font-family: 'Nunito', sans-serif; font-size: .5em; font-weight: 600; color: var(--zl-muted, #6b7a72); }
.zl-hero-count { color: var(--zl-ink, #1f2a24); }
.zl-hero-count strong {
    font-variant-numeric: tabular-nums;
    color: var(--zl-terracotta, #c2572b);
    font-size: 1.25em;
}
.zl-hero-time { font-size: .75em; color: var(--zl-muted, #6b7a72); }

/* Prayer cards: equal columns for any count, arch-topped */
.zl-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(8px, 1.2vw, 22px);
}
.zl-card {
    position: relative;
    background: var(--zl-card, #fffaf0);
    border: 2px solid var(--zl-line, rgba(15, 107, 79, .28));
    border-radius: 50% 50% 12px 12px / 32% 32% 12px 12px;
    padding: clamp(12px, 3vh, 40px) clamp(6px, .8vw, 16px) clamp(8px, 1.6vh, 20px);
    text-align: center;
    box-shadow: 0 6px 18px var(--zl-shadow, rgba(31, 42, 36, .12));
    transition: background-color .3s, color .3s, border-color .3s;
    /* .zl-cards grows to fill the space .zl-bottom gives up (992px+, see
       below) -- centre each card's content in the taller grid row that
       results, instead of leaving it pinned to the top with blank space
       under it. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.zl-card-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3.6vh, 2.9rem);
    line-height: 1;
    color: var(--zl-emerald, #0f6b4f);
    margin-bottom: clamp(4px, 1.2vh, 14px);
}
.zl-card-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.05;
}
.zl-card-adhan { font-size: clamp(1.6rem, 6vh, 5.4rem); }
.zl-card-salaah { font-size: clamp(1.15rem, 3.8vh, 3.5rem); color: var(--zl-emerald-deep, #0a4f3a); margin-top: clamp(4px, 1vh, 12px); }
.zl-card-label {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: clamp(.65rem, 1.3vh, .95rem);
    font-weight: 700;
    color: var(--zl-muted, #6b7a72);
}
.zl-card-jumuah { border-style: dashed; }

/* Next salaah (set by script.js) */
.zl-card.is-next {
    background: var(--zl-emerald, #0f6b4f);
    border-color: var(--zl-emerald-deep, #0a4f3a);
    color: var(--zl-bg, #f6efe2);
}
.zl-card.is-next .zl-card-name,
.zl-card.is-next .zl-card-salaah { color: var(--zl-bg, #f6efe2); }
.zl-card.is-next .zl-card-label { color: rgba(246, 239, 226, .75); }

/* Current salaah — js/livetime.js puts .vibrate-1 on the .azan-checker's
   parent, i.e. this card. Shown as a terracotta frame + "Now" tag, no shake. */
.zl-card.vibrate-1 { border-color: var(--zl-terracotta, #c2572b); }
.zl-card.vibrate-1::after {
    content: "Now";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--zl-terracotta, #c2572b);
    color: #fff;
    font-size: clamp(.55rem, 1.1vh, .8rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Info strip */
.zl-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 1vw, 16px);
}
.zl-pill {
    display: flex;
    align-items: baseline;
    gap: .5em;
    background: var(--zl-emerald-soft, #e3efe9);
    border: 1px solid var(--zl-line, rgba(15, 107, 79, .28));
    border-radius: 999px;
    padding: clamp(6px, 1.3vh, 16px) clamp(16px, 1.9vw, 32px);
}
.zl-pill-label { font-size: clamp(.9rem, 2.1vh, 1.5rem); font-weight: 600; color: var(--zl-muted, #6b7a72); }
.zl-pill-value { font-size: clamp(1.2rem, 3vh, 2.2rem); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Bottom: changes | notices */
.zl-bottom {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(8px, 1.2vw, 22px);
}
/* A masjid can turn off either panel (admin/settings.php) -- fill the row
   with whichever one is left rather than leaving an empty column. */
.zl-bottom:has(> :only-child) { grid-template-columns: 1fr; }
.zl-panel {
    background: var(--zl-card, #fffaf0);
    border: 1px solid var(--zl-line, rgba(15, 107, 79, .28));
    border-radius: 12px;
    padding: clamp(6px, 1vh, 14px) clamp(10px, 1.2vw, 18px);
    box-shadow: 0 6px 18px var(--zl-shadow, rgba(31, 42, 36, .12));
}
.zl-panel-title {
    margin: 0 0 clamp(3px, .6vh, 8px);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(.85rem, 1.7vh, 1.3rem);
    color: var(--zl-emerald, #0f6b4f);
    border-bottom: 1px solid var(--zl-line, rgba(15, 107, 79, .28));
    padding-bottom: 3px;
}
.zl-table { width: 100%; border-collapse: collapse; font-size: clamp(.72rem, 1.3vh, 1rem); }
.zl-table th, .zl-table td { padding: clamp(1px, .4vh, 6px) 6px; text-align: center; }
.zl-table thead th { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--zl-muted, #6b7a72); font-weight: 700; }
.zl-table tbody th { text-align: left; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2em; color: var(--zl-emerald, #0f6b4f); }
.zl-table tbody td { font-weight: 700; font-variant-numeric: tabular-nums; }
.zl-table tbody tr + tr { border-top: 1px dashed var(--zl-line, rgba(15, 107, 79, .28)); }
.zl-empty { margin: 0; color: var(--zl-muted, #6b7a72); font-size: clamp(.72rem, 1.3vh, 1rem); }

/* Shared includes inside the panels */
.zl-changes #notice-container { margin-top: clamp(6px, 1vh, 12px); }
.zl-changes .snotice {
    margin: 0;
    background: var(--zl-emerald-soft, #e3efe9);
    border-left: 4px solid var(--zl-terracotta, #c2572b);
    border-radius: 6px;
    padding: 5px 9px;
    font-family: inherit;
    font-weight: 600;
    text-transform: none;
    line-height: 1.3;
    font-size: clamp(.7rem, 1.2vh, .95rem);
    text-align: left;
    color: var(--zl-ink, #1f2a24);
}
.zl-notices #notice-container { display: none; }   /* panel supplies its own heading */
.zl-notices .float-box-fluid {
    display: block;
    max-width: none;
    margin: 0 0 clamp(5px, .8vh, 10px);
    padding: clamp(5px, .8vh, 10px) clamp(7px, .9vw, 14px);
    background: var(--zl-emerald-soft, #e3efe9);
    border: 0;
    border-left: 4px solid var(--zl-emerald, #0f6b4f);
    border-radius: 6px;
    text-align: left;
    color: var(--zl-ink, #1f2a24);
}
.zl-notices .card-header {
    margin: 0 0 3px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(.85rem, 1.6vh, 1.25rem);
    color: var(--zl-emerald-deep, #0a4f3a);
}
.zl-notices .card-text { margin: 0; font-size: clamp(.72rem, 1.3vh, 1rem); line-height: 1.4; }

/* ---------- Laptop / TV: fill the viewport, no page scroll ---------- */
@media (min-width: 992px) {
    html, body { height: 100%; overflow: hidden; }
    body { display: flex; flex-direction: column; }
    #nav, footer.footer { flex: 0 0 auto; }
    .zl-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
    .zl-board { flex: 1 1 0; min-height: 0; min-width: 0; }
    .zl-header, .zl-hero, .zl-strip { flex: 0 0 auto; }
    /* The row under the header takes the rest of the height; the content column fills it. */
    .zl-main { flex: 1 1 auto; min-height: 0; flex-direction: row; gap: clamp(8px, 1.2vw, 22px); }
    .zl-content { flex: 1 1 0; min-height: 0; }
    /* The prayer cards stop at a share of the screen height and Changes/Notices
       take everything else, so they get room to list changes and notices
       instead of being squeezed under tall cards -- see .zl-card's flex
       centring, just above. */
    .zl-cards { flex: 0 1 auto; height: clamp(210px, 36vh, 440px); min-height: 0; }
    .zl-bottom { flex: 1 1 0; min-height: clamp(130px, 17vh, 210px); }
    .zl-panel { min-height: 0; overflow-y: auto; }
}

/* ---------- Hadith panel (Settings > Hadith panel) ----------
   Large landscape screens only. The board and the panel sit side by side in .zl-stage: the board gives up the width
   the panel takes, on whichever side the masjid chose. Below the breakpoint the panel is simply not shown and the
   board is exactly as it was. Keep the breakpoint in step with MB_HADITH_PANEL_MIN_WIDTH (includes/hadith_board.php)
   and the min_screen_width bands in the hadith table, which were measured against the sizes set here.
   A screen link with ?hadith=y (.zl-hadith-force on .zl-stage) shows the panel from 992px up instead: a TV that
   reports a small CSS width (a "4K" TV set to 1280x720 at 1.5x) can still ask for it. Everything below is styled
   for >= 992px; only the display switch depends on the breakpoint / the force class. */
.zl-hadith { display: none; }
@media (min-width: 1600px) and (orientation: landscape) {
    .zl-has-hadith .zl-board { max-width: none; }
    .zl-hadith { display: flex; }
}
@media (min-width: 992px) and (orientation: landscape) {
    .zl-hadith-force.zl-has-hadith .zl-board { max-width: none; }
    .zl-hadith-force .zl-hadith { display: flex; }
    .zl-hadith {
        flex-direction: column;
        flex: 0 0 clamp(400px, 27vw, 780px);
        box-sizing: border-box;
        padding: clamp(10px, 1.6vh, 24px) clamp(18px, 1.6vw, 36px) clamp(12px, 1.8vh, 26px);
        background: var(--zl-card, #fffaf0);
        border: 2px solid var(--zl-gold, #b98b2c);
        border-radius: 50% 50% 14px 14px / 12% 12% 14px 14px;
        box-shadow: 0 8px 22px var(--zl-shadow, rgba(31, 42, 36, .12));
        text-align: center;
        overflow: hidden;
    }
    .zl-hadith .zl-divider { width: 70%; flex: 0 0 auto; }
    .zl-hadith-title {
        margin: clamp(4px, .8vh, 12px) 0 clamp(6px, 1.2vh, 16px);
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-weight: 700;
        font-size: clamp(1.2rem, 3vh, 2.4rem);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--zl-emerald, #0f6b4f);
        flex: 0 0 auto;
    }
    /* The text area takes the remaining height and centres the quote in it. */
    .zl-hadith-body { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .zl-hadith-fit { max-height: 100%; transition: opacity .6s ease; }
    .zl-hadith-fit.is-fading { opacity: 0; }
    .zl-hadith-text {
        margin: 0;
        font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
        font-size: var(--zl-hadith-size, clamp(1.1rem, 2.4vh, 1.9rem));
        line-height: 1.5;
        font-weight: 600;
        color: var(--zl-ink, #1f2a24);
        text-wrap: pretty;
    }
    .zl-hadith-text::before { content: "\201C"; display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2em; line-height: .6; color: var(--zl-gold, #b98b2c); margin-bottom: .15em; }
    .zl-hadith-narrator {
        margin: .7em 0 0;
        font-size: calc(var(--zl-hadith-size, clamp(1.1rem, 2.4vh, 1.9rem)) * .8);
        font-weight: 700;
        color: var(--zl-emerald, #0f6b4f);
    }
    .zl-hadith-source {
        flex: 0 0 auto;
        margin-top: clamp(6px, 1vh, 14px);
        padding-top: clamp(5px, .8vh, 10px);
        border-top: 1px solid var(--zl-line, rgba(15, 107, 79, .28));
        font-size: clamp(.8rem, 1.6vh, 1.25rem);
        color: var(--zl-muted, #6b7a72);
    }
    .zl-hadith-ref { display: block; font-weight: 700; color: var(--zl-emerald-deep, #0a4f3a); }
    .zl-hadith-book { display: block; }
    .zl-hadith-progress { flex: 0 0 auto; height: 3px; margin-top: clamp(6px, 1vh, 12px); border-radius: 2px; background: var(--zl-emerald-soft, #e3efe9); overflow: hidden; }
    .zl-hadith-progress span { display: block; height: 100%; width: 0; background: var(--zl-gold, #b98b2c); }
}

/* ---------- Mobile / tablet: stacked, scrolling ---------- */
@media (max-width: 991px) {
    .zl-header { grid-template-columns: 1fr; text-align: center; }
    .zl-dates { text-align: center; }
    .zl-clock { font-size: clamp(2.4rem, 12vw, 4rem); }
    .zl-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zl-card-adhan { font-size: clamp(1.6rem, 8vw, 2.6rem); }
    .zl-card-salaah { font-size: clamp(1.1rem, 5.5vw, 1.8rem); }
    .zl-card-name { font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
    .zl-bottom { grid-template-columns: 1fr; }
    .zl-divider { width: 80%; }
}