/* 7-Segment theme — fully self-contained (the only stylesheet loaded for
   this theme), so it also carries the shared nav/footer chrome. Palette
   comes from skins/*.css custom properties (fallbacks inline) -- every
   skin keeps the same dark panel background and only swaps the LED
   on/off/glow colours, matching how the real boards only ever changed
   which colour LEDs were fitted.

   No notices or upcoming-changes panels here by design -- just the live
   clock and today's schedule. The reference board this is modelled on is
   portrait (a wall clock); adapted to landscape here by laying the
   prayers out as a row of columns instead of a stacked list.

   Layout contract: at 992px+ the board fills the viewport exactly with no
   page scroll, type scales with viewport height so a TV renders bigger
   than a laptop. Below 992px it's a normal stacked, scrolling page. */

html, body {
    margin: 0;
    padding: 0;
    background: var(--s7-bg, #15100d);
    color: var(--s7-text, #e9dfd2);
    font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
}
a:link, a:visited, a:hover, a:active {
    color: var(--s7-on, #ff3b30);
    text-decoration: none;
}

/* ---------- Nav (shared markup from navigation.php) ---------- */
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--s7-panel, #1c1613);
    border-bottom: 1px solid var(--s7-line, rgba(255, 255, 255, .06));
}
#nav li { float: right; }
#nav li a {
    display: block;
    color: var(--s7-text, #e9dfd2);
    text-align: center;
    padding: 0 14px;
    line-height: 46px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#nav li a:hover:not(.active) { background-color: rgba(255, 255, 255, .05); }
#nav li span { display: block; color: var(--s7-text, #e9dfd2); text-align: center; padding: 0 20px; line-height: 46px; }
#nav .active { background-color: var(--s7-on, #ff3b30); }
#nav .active a { color: #0a0806; }
#nav #nav_name {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 18px;
    line-height: 46px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nav #myname { width: 500px; float: left; margin: 0 0 0 20px; overflow: hidden; }

#toggle { display: none; width: 26px; height: 0; margin: 10px auto; }
#toggle span:after, #toggle span:before { content: ""; position: absolute; left: 0; top: -8px; }
#toggle span:after { top: 8px; }
#toggle span { position: relative; display: block; }
#toggle span, #toggle span:after, #toggle span:before {
    width: 100%;
    height: 3px;
    background-color: var(--s7-on, #ff3b30);
    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) ---------- */
footer.footer {
    width: 100%;
    box-sizing: border-box;
    color: var(--s7-muted, #8a7d6d);
    font-size: 12px;
    background-color: var(--s7-panel, #1c1613);
    border-top: 1px solid var(--s7-line, rgba(255, 255, 255, .06));
    padding: 10px 16px;
    text-align: center;
    position: relative;
}
footer.footer a { color: var(--s7-on, #ff3b30); }
.mb-switchers { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 12px; line-height: 0; }
.mb-switchers a { color: inherit; opacity: .5; }
.mb-switchers a:hover { opacity: 1; }
.mb-switchers svg { width: 16px; height: 16px; display: block; fill: currentColor; }
@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; }
}

/* ---------- 7-segment digit component ----------
   Each digit is a box of 7 absolutely-positioned bar "segments"
   (a-g, standard 7-seg lettering); .on lights that bar up, unlit bars
   stay faintly visible at var(--s7-off) -- like a real LED board, where
   you can always see the dim outline of the whole figure-8. */
.mb7-digit {
    position: relative;
    display: inline-block;
    width: var(--dw, 22px);
    height: var(--dh, 38px);
    margin: 0 2px;
    vertical-align: middle;
}
.mb7-seg {
    position: absolute;
    background: var(--s7-off, #3a1210);
    transition: background-color .1s linear, box-shadow .1s linear;
}
.mb7-seg.on {
    background: var(--s7-on, #ff3b30);
    box-shadow: 0 0 4px var(--s7-on-glow, rgba(255, 59, 48, .65)), 0 0 12px var(--s7-on-glow, rgba(255, 59, 48, .65));
}
.mb7-a, .mb7-g, .mb7-d { left: 12%; width: 76%; height: 11%; clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%); }
.mb7-a { top: 0; }
.mb7-g { top: 44.5%; }
.mb7-d { bottom: 0; }
.mb7-b, .mb7-c, .mb7-e, .mb7-f { width: 15%; height: 42%; clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%); }
.mb7-f { top: 6%; left: 0; }
.mb7-b { top: 6%; right: 0; }
.mb7-e { bottom: 6%; left: 0; }
.mb7-c { bottom: 6%; right: 0; }

.mb7-colon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 18%;
    width: calc(var(--dw, 22px) * 0.3);
    height: var(--dh, 38px);
    margin: 0 1px;
    vertical-align: middle;
}
.mb7-colon i {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--s7-on, #ff3b30);
    box-shadow: 0 0 4px var(--s7-on-glow, rgba(255, 59, 48, .65)), 0 0 12px var(--s7-on-glow, rgba(255, 59, 48, .65));
}
@keyframes s7blink { 50% { opacity: .2; box-shadow: none; } }
.s7-clock .mb7-colon i { animation: s7blink 1s step-start infinite; }

/* ---------- Board ---------- */
.s7-board {
    max-width: 1900px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(10px, 1.6vh, 22px) clamp(14px, 2vw, 34px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vh, 22px);
}

.s7-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: clamp(6px, 1vh, 14px);
    border-bottom: 1px solid var(--s7-line, rgba(255, 255, 255, .06));
}
.s7-brand-name { font-size: clamp(1.1rem, 2.4vh, 1.7rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.s7-brand-area { margin-left: 10px; color: var(--s7-muted, #8a7d6d); font-size: clamp(.8rem, 1.6vh, 1.05rem); }
.s7-dates { text-align: right; color: var(--s7-muted, #8a7d6d); font-size: clamp(.8rem, 1.6vh, 1.05rem); }
.s7-dates span { display: inline-block; }
.s7-date-greg { margin-right: 12px; }

.s7-clock-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1vh, 12px);
    padding: clamp(10px, 2vh, 20px) 0;
}
.s7-clock .mb7-digit { --dw: clamp(28px, 6.5vh, 60px); --dh: clamp(48px, 11.5vh, 106px); }
.s7-next {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--s7-muted, #8a7d6d);
    font-size: clamp(.85rem, 1.8vh, 1.15rem);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.s7-next-label { opacity: .8; }
.s7-next-name { color: var(--s7-text, #e9dfd2); font-weight: 700; }
.s7-next-in { display: flex; align-items: center; gap: 6px; }
.s7-next-in-label { opacity: .8; }
#s7NextCount .mb7-digit { --dw: clamp(9px, 1.6vh, 15px); --dh: clamp(16px, 2.8vh, 26px); }

.s7-prayers {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 1vw, 14px);
}
.s7-prayer {
    background: var(--s7-panel, #1c1613);
    border: 1px solid var(--s7-line, rgba(255, 255, 255, .06));
    border-radius: 10px;
    padding: clamp(8px, 1.4vh, 16px) clamp(4px, .8vw, 10px);
    text-align: center;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.s7-prayer-name {
    font-weight: 700;
    letter-spacing: .06em;
    font-size: clamp(.75rem, 1.5vh, 1rem);
    color: var(--s7-muted, #8a7d6d);
    margin-bottom: clamp(4px, .8vh, 10px);
}
.s7-prayer-row { display: flex; flex-direction: column; align-items: center; margin-top: clamp(4px, .8vh, 10px); }
.s7-prayer-label { font-size: clamp(.6rem, 1.1vh, .78rem); color: var(--s7-muted, #8a7d6d); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.s7-digits-sm .mb7-digit { --dw: clamp(9px, 1.9vh, 17px); --dh: clamp(16px, 3.4vh, 30px); }

/* Upcoming prayer (js) */
.s7-prayer.is-next { border-color: var(--s7-on, #ff3b30); box-shadow: 0 0 0 1px var(--s7-on, #ff3b30); }
.s7-prayer.is-next .s7-prayer-name { color: var(--s7-on, #ff3b30); }
/* Current prayer -- .vibrate-1 comes free from the shared js/livetime.js
   azanChecker(), which runs on every theme's board via body onload. */
.s7-prayer.vibrate-1 {
    animation: none !important;
    border-color: var(--s7-on, #ff3b30);
    box-shadow: 0 0 0 2px var(--s7-on, #ff3b30), 0 0 16px var(--s7-on-glow, rgba(255, 59, 48, .65));
}
.s7-prayer.vibrate-1 .s7-prayer-name { color: var(--s7-on, #ff3b30); }

.s7-ticker {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2vw, 28px);
    flex-wrap: wrap;
}
.s7-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s7-panel, #1c1613);
    border: 1px solid var(--s7-line, rgba(255, 255, 255, .06));
    border-radius: 8px;
    padding: clamp(6px, 1vh, 10px) clamp(10px, 1.4vw, 16px);
}
.s7-tick-label { font-size: clamp(.7rem, 1.3vh, .9rem); color: var(--s7-muted, #8a7d6d); text-transform: uppercase; letter-spacing: .06em; }
.s7-tick-digits .mb7-digit { --dw: clamp(8px, 1.6vh, 14px); --dh: clamp(14px, 2.8vh, 24px); }

.s7-hidden { display: none; }

/* ---------- 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; }
    .s7-board { flex: 1 1 auto; min-height: 0; justify-content: center; }
}

/* ---------- Mobile / tablet: stacked, scrolling ---------- */
@media (max-width: 991px) {
    .s7-top { flex-direction: column; text-align: center; }
    .s7-dates { text-align: center; }
    .s7-clock .mb7-digit { --dw: 34px; --dh: 60px; }
    .s7-prayers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s7-prayer-jumuah { grid-column: span 2; }
}