/* Zakat calculator and guide (zakah-calculator.html, zakah-guide.html).
   Mufti Shabir supplied both pages self-contained. These rules fit them inside
   the shared site nav and footer; his own styles stay in each file. */

/* The nav and footer expect Tailwind's preflight reset, which is off on these
   pages because it would restyle Mufti's own elements. This is the part of
   preflight the chrome relies on, scoped to it, and it also undoes his element
   rules (links, paragraphs) that would otherwise reach it. :where() keeps each
   rule at element weight, so the chrome's own classes still win. */
#nav-container,
#footer-container {
    font-size: 1rem;
    line-height: 1.5;
}

:where(#nav-container, #footer-container) *,
:where(#nav-container, #footer-container) *::before,
:where(#nav-container, #footer-container) *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

:where(#nav-container, #footer-container) [hidden] {
    display: none;
}

:where(#nav-container, #footer-container) a {
    color: inherit;
    text-decoration: inherit;
    border-bottom: 0;
}

:where(#nav-container, #footer-container) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) {
    margin: 0;
}

:where(#nav-container, #footer-container) :is(ul, ol) {
    list-style: none;
    padding: 0;
}

:where(#nav-container, #footer-container) button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

:where(#nav-container, #footer-container) :is(img, svg) {
    display: block;
    vertical-align: middle;
}

:where(#nav-container, #footer-container) img {
    max-width: 100%;
    height: auto;
}

/* The calculator has its own .btn-gold for its summary buttons; the nav's
   Contact button keeps the site's sizing (style.css .btn-gold-sm). */
#nav-container .btn-gold.btn-gold-sm {
    flex: 0 1 auto;
    padding: 12px 26px;
    font-size: 14px;
    letter-spacing: normal;
}

/* The site nav is sticky (style.css #nav-container) and 89px tall at every
   width, so Mufti's sticky summary and contents list, and the guide's section
   jumps, sit below it rather than under it. */
:root {
    --zk-nav-clear: 89px;
}

body.embed {
    --zk-nav-clear: 0px;                /* no site nav above an embedded calculator */
}

/* The sticky right column is taller than most screens, so it scrolls inside
   itself rather than leaving the summary buttons and the Zakat-year card out
   of reach below the fold. */
@media (min-width: 1060px) {
    .zk-col-right {
        top: calc(var(--zk-nav-clear) + 20px);
        max-height: calc(100vh - var(--zk-nav-clear) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

nav.toc {
    top: calc(var(--zk-nav-clear) + 22px);
}

/* In one column the supplied sticky contents list sat over the article text
   for the whole guide; it sticks only beside the article. */
@media (max-width: 999.98px) {
    nav.toc {
        position: static;
    }
}

section.g-sec {
    scroll-margin-top: calc(var(--zk-nav-clear) + 16px);
}

/* HANDOVER.md check 6: at phone width the summary stacks above the form. The
   supplied file left the whole right column below the form, so below the
   two-column breakpoint its cards join the grid and only the summary moves
   first; the Zakat-year and method cards stay after the form. */
@media (max-width: 1059.98px) {
    .zk-col-right {
        display: contents;
    }

    .zk-col-right > .sum {
        order: -1;
    }

    .zk-col-right > .hawl,
    .zk-col-right > .sidecard {
        margin-top: 0;                  /* the grid gap spaces them now */
    }
}

/* Readability ruling (CLAUDE.md, 29 September 2026): every enabled text state
   reaches 4.5:1. Measured with tools/readability-audit.js on 30 October 2026. */
.g-sec .num,
.sec-no,
nav.toc a::before {
    color: var(--gold-deep);            /* gold-dim was 3.96:1 to 4.31:1 */
}

.g-foot p {
    color: inherit;                     /* the page-wide p colour left dark text on the dark footer */
}

.g-foot strong {
    color: var(--cream);
}

/* Marcellus has one weight and is never bolded (design.md). These are every
   Marcellus selector in the two pages; without a weight they took the
   browser's bold or the body's 600, and the browser bolded them artificially. */
.nisab-strip .ns-title,
.ns-val,
.sec-no,
.sec-title,
.sec-tot,
.sidecard h3,
.sum-title .t,
.sum-hero .big,
.hawl h3,
.breakdown h3,
.zk-foot h4,
.ps-head h1,
.g-sec .num,
.ex-h h4,
.g-foot h4 {
    font-weight: 400;
}

/* Embedded (?embed=1) and printed copies show the calculator alone. */
body.embed #nav-container,
body.embed #footer-container {
    display: none;
}

@media print {
    #nav-container,
    #footer-container {
        display: none !important;
    }

    /* HANDOVER.md check 5: one A4 sheet. The supplied print styles kept the
       on-screen breakdown table above the print summary, which ran to two. */
    .breakdown {
        display: none !important;
    }
}