/* Classic theme — fit-to-screen refinement. Loaded after
   css/styles.css/colors.css, so this refines the nav/footer chrome
   those files draw (shared with contact.php/register.php/contribute.php
   too, via includes/theme_head.php) as well as the board itself.

   Below 992px (Bootstrap's own `lg` breakpoint, where .col-lg-2 already
   stacks to full width) the page keeps its original scrolling, stacked
   mobile layout. At 992px+ ("laptop and larger"), the board instead fills
   the viewport exactly with no page scroll, and font sizes scale with
   viewport HEIGHT (via clamp()) so a large TV genuinely renders bigger,
   more spacious text than a laptop screen, not smaller. */

/* css/styles.css's #nav_name is 30px with no wrap protection: a long
   masjid name wraps inside #myname's fixed 500px width, and since the
   surrounding ul is float-cleared via overflow:hidden, the wrapped
   (taller) #myname doubles the whole nav bar's height. Truncate instead. */
#nav #myname { overflow: hidden; }
#nav #nav_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Palette / theme switcher icons in the footer's right corner (footer.php). */
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; }

/* Current salaah (js/livetime.js adds .vibrate-1 to the box whose adhan was
   the most recent to pass): a plain inset frame instead of the old shake
   animation. Applies at every width. */
.mb-board .vibrate-1 {
    animation: none !important;
    box-shadow: inset 0 0 0 5px #ffc107;
}

/* Off-screen azan-checker spans (screen mode's data-field patcher targets
   these separately from the visible box-time text -- see theme.md §8). */
.mb-hidden { display: none; }

/* "Nothing to show" text for the notices/changes panels when screen mode
   patches a day with none (index.php's own first render never needs these:
   the panels/includes above already omit themselves when empty). */
.mb-notices-empty-msg,
.mb-changes-empty-msg {
    text-align: center;
    opacity: .7;
    padding: 10px 0;
}

@media (min-width: 992px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    #nav { flex: 0 0 auto; }

    .mb-board {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        overflow: hidden;
        padding: 0.6vh 1vw;
        box-sizing: border-box;
    }
    .mb-board > * { flex: 0 0 auto; }

    /* Notifications are the one section with unbounded admin content.
       Capped rather than grown-to-fill, so leftover space spreads evenly
       across the whole board (via .mb-board's justify-content) instead of
       collecting as one empty gap; if notices still exceed the cap, this
       box alone scrolls internally and the rest of the board stays put. */
    .mb-notifications {
        flex: 0 1 auto;
        max-height: 42vh;
        min-height: 0;
        overflow-y: auto;
    }

    /* The fixed-footer spacer is only needed while footer.footer is
       position:fixed (below this breakpoint); footer flows normally here. */
    .mb-footer-spacer { display: none; }
    footer.footer {
        position: relative;
        flex: 0 0 auto;
    }

    /* ---- Viewport-height-driven type scale ----
       Ceilings are raised well past what a 1080p TV needs, and padding
       scales with vh too (not just font-size): on a very tall viewport
       (4K+), boxes keep growing via padding even once their text hits its
       ceiling, instead of leaving dead space between capped-out text. */
    .mb-board .timebar-date {
        font-size: clamp(1rem, 2.6vh, 2.6rem) !important;
        padding: clamp(0.4vh, 1vh, 2.2vh) 0 !important;
    }

    .mb-board .box-title {
        font-size: clamp(0.8rem, 1.9vh, 1.8rem) !important;
        padding-top: clamp(0.3vh, 0.8vh, 2.2vh) !important;
        min-height: 0 !important;
    }
    .mb-board .box-time {
        font-size: clamp(1.3rem, 3.6vh, 4.2rem) !important;
        padding-top: clamp(0.3vh, 1vh, 3vh) !important;
        padding-bottom: clamp(0.3vh, 1vh, 3vh) !important;
    }

    /* Sehri/Sunrise/Ishraaq/Zawwal ticker: equal-width boxes (matching
       Zawwal, the widest by content) rather than each shrinking to its own
       text width. */
    .mb-ticker {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .mb-board .float-box {
        width: clamp(150px, 26vh, 420px) !important;
        max-width: none !important;
        box-sizing: border-box;
        margin: clamp(0.5vh, 1vh, 2.2vh) 0.8vw !important;
        padding: clamp(0.5vh, 1.5vh, 3vh) clamp(0.8vw, 1.4vw, 2vw) !important;
    }
    .mb-board .float-box .box-time {
        white-space: nowrap;
    }
    .mb-board .float-box .box-title {
        font-size: clamp(0.85rem, 1.8vh, 1.7rem) !important;
    }
    .mb-board .float-box .box-time {
        font-size: clamp(1.2rem, 3.2vh, 3.8rem) !important;
    }

    .mb-board .snotice {
        font-size: clamp(0.9rem, 2vh, 1.8rem) !important;
        line-height: 1.4 !important;
        padding: clamp(6px, 1.2vh, 2vh) !important;
    }

    .mb-board .change-box {
        height: auto !important;
        margin: clamp(0.4vh, 0.8vh, 2vh) 0.6vw !important;
        padding: clamp(0.3vh, 0.8vh, 2.4vh) 0 !important;
    }
    .mb-board .block-title {
        font-size: clamp(0.9rem, 1.8vh, 1.6rem) !important;
        min-height: 0 !important;
    }
    .mb-board .change-date,
    .mb-board .azaan-change,
    .mb-board .jamaat-change {
        font-size: clamp(0.85rem, 1.7vh, 1.5rem) !important;
        min-height: 0 !important;
    }

    .mb-notifications .float-box-fluid {
        max-width: 30vw;
        margin: clamp(0.4vh, 0.8vh, 2vh) 0.6vw;
        padding: clamp(0.4vh, 1vh, 2.4vh) clamp(0.8vw, 1.2vw, 2vw);
    }
    .mb-notifications .card-header { font-size: clamp(0.9rem, 1.8vh, 1.6rem) !important; }
    .mb-notifications .card-text { font-size: clamp(0.8rem, 1.5vh, 1.3rem) !important; }
}