/* Mihrab theme — fully self-contained: this is the ONLY stylesheet loaded
   for this theme (see themes/README.md), so it also carries the nav/footer
   chrome shared with every page, restyled to match. Colors come from
   skins/gold-navy.css's CSS custom properties (each has a fallback here in
   case a skin file fails to load). */

html, body {
    margin: 0;
    padding: 0;
    background: var(--mihrab-bg-deep, #081d38);
    color: var(--mihrab-text, #f5efe3);
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-image:
        linear-gradient(180deg, var(--mihrab-bg, #0b2b4e) 0%, var(--mihrab-bg-deep, #081d38) 100%),
        url("assets/pattern-bg.svg");
    background-size: auto, 60px 60px;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, fixed;
}

a:link, a:visited, a:hover, a:active {
    color: var(--mihrab-text, #f5efe3);
    text-decoration: none;
}

/* ---------- Nav (shared markup from navigation.php) ---------- */
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--mihrab-bg-deep, #081d38);
    border-bottom: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
}
#nav li { float: right; }
/* Every cell in the bar shares one line-height and no vertical padding, so
   the name cell and the links are the same height and the active link's
   background spans the whole bar. */
#nav li a {
    display: block;
    color: var(--mihrab-text, #f5efe3);
    text-align: center;
    padding: 0 14px;
    line-height: 48px;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .04em;
}
#nav li a:hover:not(.active) { background-color: var(--mihrab-panel, #123a68); }
#nav li span { display: block; color: var(--mihrab-gold, #d8b46a); text-align: center; padding: 0 20px; line-height: 48px; }
#nav .active { background-color: var(--mihrab-gold-soft, #c9a24a); }
#nav .active a { color: var(--mihrab-bg-deep, #081d38); }
#nav #nav_name {
    font-family: 'Amiri', serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 48px;
    text-align: left;
}
#nav #myname { width: 500px; float: left; margin: 0 0 0 20px; }

#toggle {
    display: none;
    width: 28px;
    height: 0px;
    margin: 10px auto 10px;
}
#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(--mihrab-gold, #d8b46a);
    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 {
    font-family: inherit;
    text-decoration: none;
    color: var(--mihrab-text, #f5efe3);
    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) ----------
   Deliberately static, not fixed: unlike the classic theme (which assumes
   everything fits one screen), Mihrab's notices/change panels can push the
   page taller than the viewport, and a fixed footer would then sit on top
   of whatever scrolls underneath it. */
footer.footer {
    width: 100%;
    box-sizing: border-box;
    color: var(--mihrab-text-dim, #b9c8e0);
    font-size: 13px;
    background-color: var(--mihrab-bg-deep, #081d38);
    border-top: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
    margin-top: clamp(10px, 1.6vw, 20px);
    padding: 14px 16px;
    text-align: center;
}
footer.footer a { color: var(--mihrab-gold, #d8b46a); }
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 ornament SVGs (loaded as <img>) via a filter. */
.mihrab-arch-svg, .mihrab-corner img { filter: var(--mihrab-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 shell ---------- */
.mihrab-shell {
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
    padding: clamp(10px, 2vw, 30px);
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    grid-template-areas:
        "header header header"
        "left center right"
        "ticker ticker ticker";
    gap: clamp(10px, 1.6vw, 26px);
    box-sizing: border-box;
}

.mihrab-corner { position: absolute; width: clamp(36px, 4vw, 64px); height: auto; opacity: .8; z-index: 1; }
.mihrab-corner img { display: block; width: 100%; height: auto; }
.mihrab-corner-tl { top: 8px; left: 8px; }
.mihrab-corner-tr { top: 8px; right: 8px; transform: scaleX(-1); }
.mihrab-corner-bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.mihrab-corner-br { bottom: 8px; right: 8px; transform: scale(-1, -1); }

/* ---------- Header / arch ---------- */
.mihrab-header {
    grid-area: header;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 24px);
}
.mihrab-header-date {
    flex: 0 0 auto;
    font-size: clamp(.85rem, 1.3vw, 1.3rem);
    color: var(--mihrab-text-dim, #b9c8e0);
    padding-bottom: clamp(10px, 2vw, 22px);
    max-width: 22%;
}
.mihrab-header-date-right { text-align: right; }
.mihrab-header-arch {
    position: relative;
    flex: 1 1 auto;
    max-width: 720px;
    margin: 0 auto;
    min-height: clamp(160px, 20vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mihrab-arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.mihrab-header-content { position: relative; z-index: 1; }
.mihrab-masjid-area {
    font-family: 'Amiri', serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: clamp(1rem, 2.4vw, 1.7rem);
    color: var(--mihrab-gold, #d8b46a);
}
.mihrab-masjid-name {
    font-size: clamp(.8rem, 1.4vw, 1.05rem);
    color: var(--mihrab-text-dim, #b9c8e0);
    margin-top: 2px;
}
.mihrab-clock {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    letter-spacing: .03em;
    margin-top: clamp(2px, 1vw, 10px);
}

/* ---------- Panels (shared card look for left/right column content) ---------- */
.mihrab-panel {
    background: var(--mihrab-panel, #123a68);
    border: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
    border-radius: 10px;
    padding: clamp(10px, 1.4vw, 20px);
    margin-bottom: clamp(10px, 1.6vw, 20px);
    box-shadow: 0 6px 16px var(--mihrab-shadow, rgba(0, 0, 0, .35));
}
.mihrab-panel-title {
    margin: 0 0 10px;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(.95rem, 1.6vw, 1.3rem);
    color: var(--mihrab-gold, #d8b46a);
    text-align: center;
}
.mihrab-panel-title small {
    display: block;
    font-family: inherit;
    font-weight: 400;
    font-size: .55em;
    color: var(--mihrab-text-dim, #b9c8e0);
}

.mihrab-col-left { grid-area: left; }
.mihrab-col-center { grid-area: center; }
.mihrab-col-right { grid-area: right; }

/* ---------- Mini tables (Next Salaah Change / Jumu'ah) ---------- */
.mihrab-mini-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: clamp(.85rem, 1.5vw, 1.15rem);
}
.mihrab-mini-table th {
    color: var(--mihrab-gold-soft, #c9a24a);
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
}
.mihrab-mini-table td {
    padding: 6px 4px;
    border-bottom: 1px dashed var(--mihrab-divider, rgba(216, 180, 106, .2));
}
.mihrab-mini-table tr:last-child td { border-bottom: none; }

/* ---------- Moon panel ---------- */
.mihrab-moon-panel { text-align: center; }
.mihrab-moon-icon { width: clamp(48px, 6vw, 84px); height: auto; }
.mihrab-moon-label {
    margin-top: 6px;
    font-size: clamp(.8rem, 1.3vw, 1.05rem);
    color: var(--mihrab-text-dim, #b9c8e0);
}

/* ---------- Salaah times table (center) ---------- */
.mihrab-times-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background: var(--mihrab-panel, #123a68);
    border: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--mihrab-shadow, rgba(0, 0, 0, .35));
}
.mihrab-times-table th, .mihrab-times-table td {
    padding: clamp(8px, 1.4vw, 16px) clamp(6px, 1.2vw, 14px);
}
.mihrab-times-table thead th {
    color: var(--mihrab-gold-soft, #c9a24a);
    font-weight: 600;
    font-size: clamp(.75rem, 1.1vw, .95rem);
    border-bottom: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
}
.mihrab-times-table tbody th {
    text-align: left;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    color: var(--mihrab-text, #f5efe3);
}
.mihrab-times-table tbody td {
    font-size: clamp(1.1rem, 2.2vw, 1.9rem);
    font-weight: 600;
}
.mihrab-times-table tbody tr:not(:last-child) {
    border-bottom: 1px dashed var(--mihrab-divider, rgba(216, 180, 106, .2));
}
.mihrab-row-maghrib td { color: var(--mihrab-accent, #8ec1f2); }

/* Current salaah (adhan most recently passed): tinted row with a gold frame. */
.mihrab-times-table tr.vibrate-1 {
    background: rgba(216, 180, 106, .18);
    outline: 3px solid var(--mihrab-gold, #d8b46a);
    outline-offset: -3px;
}
/* Same treatment for the Jumu'ah panel over in the left column, which is
   what "current salaah" points at instead of the (on a Friday, inactive)
   Zuhr row -- see the hidden checker beside it in layout.php. */
.mihrab-panel.vibrate-1 {
    background: rgba(216, 180, 106, .18);
    outline: 3px solid var(--mihrab-gold, #d8b46a);
    outline-offset: -3px;
}

.mihrab-countdown {
    margin-top: clamp(10px, 1.6vw, 20px);
    text-align: center;
}
.mihrab-countdown-label {
    font-size: clamp(.8rem, 1.3vw, 1.05rem);
    color: var(--mihrab-text-dim, #b9c8e0);
}
.mihrab-countdown-value {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    color: var(--mihrab-gold, #d8b46a);
}

/* "Nothing to show" text for the notices panel when screen mode patches a
   day with none -- the initial server render never needs this, since
   includes/notifications.php already omits itself entirely when empty. */
.mihrab-empty {
    text-align: center;
    color: var(--mihrab-text-dim, #b9c8e0);
    padding: 10px 0;
}

/* ---------- Ayah panel ---------- */
.mihrab-ayah { min-height: 120px; }
.mihrab-ayah-text, .mihrab-ayah-ref {
    opacity: 0;
    transition: opacity .4s ease;
}
.mihrab-ayah.is-visible .mihrab-ayah-text,
.mihrab-ayah.is-visible .mihrab-ayah-ref {
    opacity: 1;
}
.mihrab-ayah-text {
    font-size: clamp(.9rem, 1.5vw, 1.15rem);
    line-height: 1.5;
    text-align: center;
    margin: 0 0 10px;
}
.mihrab-ayah-ref {
    font-size: clamp(.75rem, 1.1vw, .9rem);
    color: var(--mihrab-gold-soft, #c9a24a);
    text-align: center;
    margin: 0;
}

/* ---------- Ticker ---------- */
.mihrab-ticker {
    grid-area: ticker;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(6px, 1.2vw, 16px);
    background: var(--mihrab-panel-alt, #0f335c);
    border: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
    border-radius: 10px;
    padding: clamp(8px, 1.2vw, 14px) clamp(10px, 2vw, 24px);
}
.mihrab-ticker-item {
    flex: 1 1 0;
    text-align: center;
    min-width: 100px;
}
.mihrab-ticker-label {
    display: block;
    font-size: clamp(.7rem, 1vw, .9rem);
    color: var(--mihrab-text-dim, #b9c8e0);
}
.mihrab-ticker-value {
    display: block;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(.95rem, 1.6vw, 1.3rem);
    color: var(--mihrab-text, #f5efe3);
}

/* ---------- Notices / zuhr-change / salaah-change banners (shared includes:
   includes/notifications.php, includes/salaahtimechanges.php,
   includes/zuhrchangebanner.php — markup and classes are fixed by those
   files, not by the theme, so every class they use needs a rule here since
   css/styles.css and css/colors.css aren't loaded for this theme). ---------- */
.float-container {
    max-width: 1800px;
    margin: clamp(10px, 1.6vw, 20px) auto 0;
    padding: 0 clamp(10px, 2vw, 30px);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}
.snotice {
    background: var(--mihrab-gold, #d8b46a);
    color: var(--mihrab-bg-deep, #081d38);
    border-radius: 8px;
    padding: 8px;
    font-size: clamp(.9rem, 1.6vw, 1.2rem);
}

.change-box, .float-box-fluid {
    display: inline-block;
    box-sizing: border-box;
    width: 31%;
    min-width: 260px;
    vertical-align: top;
    margin: 6px 1%;
    padding: 10px 14px;
    background: var(--mihrab-panel, #123a68) !important;
    border: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35));
    color: var(--mihrab-text, #f5efe3) !important;
    border-radius: 8px;
    height: auto !important;
}
.float-box-fluid { text-align: left; }

.block-title {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--mihrab-gold, #d8b46a);
    margin-bottom: 6px;
}
.changes { display: inline-block; vertical-align: middle; }
.changes.full-width {
    display: block;
    font-size: clamp(.8rem, 1.2vw, 1rem);
    color: var(--mihrab-text-dim, #b9c8e0);
    margin-bottom: 4px;
}
.changes.half-width { width: 48%; }
.change-date, .azaan-change, .jamaat-change {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    font-weight: 600;
}
.azaan-change { border-right: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35)) !important; }
.jamaat-change { border-left: 1px solid var(--mihrab-divider, rgba(216, 180, 106, .35)) !important; }

.card-header {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--mihrab-gold, #d8b46a);
    margin: 0 0 8px;
}
.card-body { }
.card-text {
    margin: 0;
    font-size: clamp(.85rem, 1.3vw, 1.05rem);
    line-height: 1.5;
    color: var(--mihrab-text, #f5efe3);
}

@media (max-width: 900px) {
    .change-box, .float-box-fluid { width: 100%; margin: 6px 0; }
}

/* ---------- Mobile layout ---------- */
@media (max-width: 900px) {
    .mihrab-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "center"
            "left"
            "right"
            "ticker";
    }
    .mihrab-header { flex-direction: column; align-items: center; gap: 10px; }
    .mihrab-header-date { max-width: none; padding-bottom: 0; }
    .mihrab-header-date-right { text-align: center; }
    .mihrab-header-content { position: static; margin-top: 10px; }
    .mihrab-corner { width: 32px; }
    .mihrab-ticker { flex-direction: column; }
    .mihrab-ticker-item { min-width: 0; }
}

/* ---------- Laptop / TV: fill the viewport, no page scroll ----------
   The base rules above size type by viewport WIDTH (fine for phones); from
   992px up we re-scale everything by viewport HEIGHT so the board fits one
   screen at 1366x768 through 4K, with the notices strip taking whatever is
   left and scrolling internally. */
@media (min-width: 992px) {
    html, body { height: 100%; overflow: hidden; }
    body { display: flex; flex-direction: column; }
    #nav, footer.footer { flex: 0 0 auto; }
    footer.footer { margin-top: 0; }

    .mihrab-shell {
        flex: 0 0 auto;
        width: 100%;
        padding: clamp(4px, .8vh, 18px) clamp(10px, 2vw, 30px);
        gap: clamp(5px, 1vh, 18px);
    }

    /* Zuhr banner | notices, side by side so the leftover height isn't
       spent on two stacked headings before the first notice appears. */
    .mihrab-extras {
        flex: 1 1 auto;
        min-height: clamp(36px, 6vh, 160px);
        overflow: hidden;
        width: 100%;
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 clamp(10px, 2vw, 30px) clamp(6px, 1vh, 16px);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: minmax(0, 1fr);
        gap: clamp(8px, 1vw, 20px);
        align-items: start;
    }
    /* A masjid can turn off the banner and/or notices (admin/settings.php)
       -- fill the row with whichever is left instead of an empty column. */
    .mihrab-extras:has(> :only-child) { grid-template-columns: 1fr; }
    .mihrab-extras-notices { min-height: 0; max-height: 100%; overflow-y: auto; }
    .mihrab-extras .float-container { margin: 0; padding: 0; }
    .mihrab-extras-notices #notice-container { display: none; }   /* column is self-evidently notices */
    .mihrab-extras .snotice { font-size: clamp(.8rem, 1.6vh, 1.1rem); padding: clamp(4px, .7vh, 8px); }
    .mihrab-extras .float-box-fluid {
        display: block;
        width: auto;
        min-width: 0;
        margin: 0 0 clamp(3px, .6vh, 8px);
        padding: clamp(6px, 1vh, 14px) 14px;
    }
    .mihrab-extras .card-header { font-size: clamp(.9rem, 1.8vh, 1.3rem); margin-bottom: 4px; }
    .mihrab-extras .card-text { font-size: clamp(.8rem, 1.5vh, 1.05rem); line-height: 1.4; }

    /* Header / arch — content anchored to the arch's baseline, clear of the
       finial at the apex now that the arch is shorter. */
    .mihrab-header-arch { min-height: clamp(120px, 18vh, 260px); align-items: flex-end; }
    .mihrab-header-content { padding-bottom: clamp(6px, 1.6vh, 22px); }
    .mihrab-header-date { font-size: clamp(.85rem, 1.7vh, 1.3rem); padding-bottom: clamp(4px, 1vh, 20px); }
    .mihrab-masjid-area { font-size: clamp(.95rem, 2.2vh, 1.7rem); line-height: 1.15; }
    .mihrab-masjid-name { font-size: clamp(.75rem, 1.4vh, 1.05rem); line-height: 1.15; }
    .mihrab-clock { font-size: clamp(1.7rem, 6vh, 4.5rem); line-height: 1; margin-top: clamp(4px, 1vh, 12px); }

    /* Panels */
    .mihrab-panel { padding: clamp(6px, 1.1vh, 18px); margin-bottom: clamp(5px, .9vh, 16px); }
    .mihrab-panel-title { font-size: clamp(.85rem, 1.8vh, 1.3rem); margin-bottom: clamp(3px, .6vh, 8px); }
    .mihrab-panel-title small { font-size: .5em; }
    .mihrab-mini-table { font-size: clamp(.8rem, 1.7vh, 1.15rem); }
    .mihrab-mini-table th { padding-bottom: clamp(2px, .4vh, 6px); }
    .mihrab-mini-table td { padding: clamp(2px, .5vh, 6px) 4px; }
    .mihrab-moon-icon { width: clamp(36px, 7vh, 80px); }
    .mihrab-moon-label { font-size: clamp(.75rem, 1.5vh, 1.05rem); margin-top: 2px; }
    .mihrab-ayah { min-height: 0; }
    .mihrab-ayah-text { font-size: clamp(.85rem, 1.8vh, 1.15rem); line-height: 1.4; margin-bottom: 6px; }
    .mihrab-ayah-ref { font-size: clamp(.7rem, 1.3vh, .9rem); }

    /* Times table */
    .mihrab-times-table th, .mihrab-times-table td { padding: clamp(4px, 1.1vh, 14px) clamp(6px, 1.2vw, 14px); }
    .mihrab-times-table thead th { font-size: clamp(.65rem, 1.2vh, .95rem); }
    .mihrab-times-table tbody th { font-size: clamp(.95rem, 2.4vh, 1.5rem); }
    .mihrab-times-table tbody td { font-size: clamp(1.05rem, 3vh, 1.9rem); }
    .mihrab-countdown { margin-top: clamp(5px, 1vh, 18px); }
    .mihrab-countdown-label { font-size: clamp(.75rem, 1.5vh, 1.05rem); }
    .mihrab-countdown-value { font-size: clamp(1.2rem, 3.3vh, 2.6rem); }

    /* Ticker */
    .mihrab-ticker { padding: clamp(6px, 1.2vh, 14px) clamp(10px, 2vw, 24px); }
    .mihrab-ticker-label { font-size: clamp(.7rem, 1.3vh, .9rem); }
    .mihrab-ticker-value { font-size: clamp(.95rem, 2vh, 1.3rem); }
}