/*
 * Shared stylesheet for every institution.
 *
 * Written entirely in terms of the CSS custom properties the layout emits from
 * the tenant's theme, so nothing here needs to change to give a second
 * institution a different look. Anything a tenant needs beyond colour and type
 * belongs in its own /themes/{preset}.css, which loads after this file.
 */

/* ---------------------------------------------------------------------------
 * Default palette
 *
 * Declared here so this stylesheet stands on its own. A tenant's theme is emitted
 * as a <style> block *after* this file and overrides whichever of these it sets.
 *
 * These defaults are not decoration. An undefined var() is invalid at
 * computed-value time and falls back to the property's initial value, not to the
 * rule it was overriding — so `background: var(--brand)` with no --brand becomes
 * transparent. Combined with Bootstrap's white button text that produced an
 * invisible, still-clickable "New page" button in the admin, which loaded this
 * stylesheet without emitting any variables.
 * ------------------------------------------------------------------------- */

:root {
    --brand: #1b6ec2;
    --brand-soft: #2f80d6;
    --accent: #c0392b;
    --ink: #303030;
    --muted: #606060;
    --surface: #ffffff;
    --surface-alt: #f5f7f6;
    --band: #303030;
    --border: #dcdcdc;
    --font-heading: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-body: "Open Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Page frame
 *
 * A flex column rather than the absolutely positioned footer the project
 * template ships with. That approach pulls the footer out of the document flow,
 * so any page taller than the viewport renders its content straight through it —
 * which is exactly what the prayer timetable was doing.
 * ------------------------------------------------------------------------- */

html {
    font-size: 16px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface);
}

main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--font-heading);
    color: var(--brand);
}

h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

a {
    color: var(--brand);
}

a:hover {
    color: var(--brand-soft);
}

/* ---------------------------------------------------------------------------
 * Greeting band
 * ------------------------------------------------------------------------- */

.site-band {
    background: var(--band);
    color: #fff;
    text-align: center;
    padding: 0.75rem 1rem;
}

.site-band p {
    margin: 0;
    font-family: var(--font-heading);
    line-height: 1.6;
}

.site-band .band-primary {
    font-size: 1.25rem;
    font-weight: 700;
}

.site-band .band-secondary {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Arabic sets larger than Latin at the same nominal size, and reads
   right-to-left. */
.site-band [lang="ar"],
[lang="ar"] {
    direction: rtl;
    font-size: 1.4rem;
}

/* ---------------------------------------------------------------------------
 * Header and navigation
 * ------------------------------------------------------------------------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header .navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand);
    white-space: normal;
}

/* Sized by height so any logo shape fits the header band. The file is served at
   its original resolution, so the intrinsic size is usually far larger than this
   — constraining both dimensions keeps a tall or square mark from pushing the
   header open. */
.site-logo {
    max-height: 3.25rem;
    max-width: 12rem;
    width: auto;
    height: auto;
}

@media (max-width: 575.98px) {
    .site-logo {
        max-height: 2.5rem;
    }
}

.site-header .nav-link {
    color: var(--ink);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--brand);
}

.site-header .dropdown-menu {
    border-color: var(--border);
}

/* ---------------------------------------------------------------------------
 * Prayer times
 *
 * The table the community reads daily. Kept airy and unruled, with the times
 * themselves the largest thing on it.
 * ------------------------------------------------------------------------- */

.prayer-panel {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.prayer-dates {
    font-family: var(--font-heading);
    color: var(--brand);
    line-height: 1.4;
}

.prayer-dates .hijri {
    font-size: 1.15rem;
    font-weight: 700;
}

.prayer-dates .gregorian {
    font-size: 0.95rem;
    color: var(--muted);
}

.prayer-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--brand);
}

.prayer-table th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

.prayer-table td {
    padding: 0.4rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.prayer-table .prayer-name {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.prayer-table .prayer-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The next prayer still to come, so the common question is answered at a glance. */
.prayer-table tr.is-next td {
    font-weight: 700;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.jamaat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jamaat-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.jamaat-list .time {
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* The month-at-a-glance timetable: many rows, so it needs to stay scannable. */
.timetable {
    font-variant-numeric: tabular-nums;
}

.timetable thead th {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.timetable tbody tr.is-today {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */

.btn-brand {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Reserved for the one thing that should pull the eye — a live broadcast. */
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-accent:hover,
.btn-accent:focus {
    background: color-mix(in srgb, var(--accent) 85%, black);
    border-color: color-mix(in srgb, var(--accent) 85%, black);
    color: #fff;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
}

/* ---------------------------------------------------------------------------
 * Content
 * ------------------------------------------------------------------------- */

.section-heading {
    font-family: var(--font-heading);
    color: var(--brand);
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.content-block {
    line-height: 1.7;
}

.content-block h2 {
    font-size: 1.4rem;
    margin-top: 1.75rem;
}

.content-block h3 {
    font-size: 1.15rem;
    margin-top: 1.25rem;
}

/* Newsletters carry tables of observances; they must stay readable on a phone. */
.content-block table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
}

.content-block th,
.content-block td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
}

.content-block th {
    background: var(--surface-alt);
    text-align: left;
}

.content-block img {
    max-width: 100%;
    height: auto;
}

.schedule-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
}

.schedule-card h3 {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

.site-footer {
    background: var(--band);
    color: rgba(255, 255, 255, 0.82);
    padding: 2.5rem 0 1.5rem;
    margin-top: 3rem;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer .footer-heading {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.site-footer .footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 1.75rem;
    padding-top: 1rem;
    font-size: 0.85rem;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 1000;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    h1 {
        font-size: 1.6rem;
    }

    .site-band .band-primary {
        font-size: 1.05rem;
    }
}

/* ---------------------------------------------------------------------------
   Two-level menu

   Bootstrap opens dropdowns on click. The menu is also asked to open on hover,
   which is fenced by two media queries rather than applied globally:

   - `hover: hover` keeps it away from touch screens, where there is no hover and
     the emulated one fires on the tap that was meant to follow a link.
   - The `min-width` keeps it away from the collapsed burger menu, where the
     dropdown is stacked inline and opening it on pointer-over makes the list
     jump around under the reader.

   Bootstrap's own click handling stays in place underneath, so keyboard users
   (who never hover) and touch users still get a control that opens on activation.
   Hover is an addition here, never the only way in.
--------------------------------------------------------------------------- */
@media (hover: hover) and (min-width: 992px) {
    .navbar .nav-hover:hover > .dropdown-menu {
        display: block;
    }

    /* The gap between the trigger and the panel is where a hover menu usually
       fails: the pointer crosses dead space, hover is lost, and the menu shuts
       before it can be reached. Removing the top margin closes that gap. */
    .navbar .nav-hover > .dropdown-menu {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------------
   Homepage banner

   Every picture is given the same box and cropped to fill it. Without that, two
   images of different proportions change the height of the page as they rotate,
   which shoves the content below them up and down — the prayer table being the
   thing people actually came for.

   The height is set in viewport units with a ceiling so the banner scales on a
   phone without swallowing the screen, and never grows absurd on a wide monitor.
--------------------------------------------------------------------------- */
.home-banner {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.home-banner-image {
    display: block;
    width: 100%;
    height: clamp(11rem, 32vw, 22rem);
    object-fit: cover;
    /* Faces and buildings usually sit in the upper half, so a tall picture is
       cropped from the bottom rather than through the middle. */
    object-position: center 40%;
}

.home-banner-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2.25rem 1rem 1rem;
    color: #fff;
    font-size: 1.05rem;
    /* A gradient rather than a flat bar: text stays readable over a light picture
       without hiding the part of the image directly behind it. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

/* Bootstrap's control and indicator glyphs are white, which disappears against a
   pale photograph. A shadow costs nothing and works over any picture. */
.home-banner .carousel-control-prev-icon,
.home-banner .carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
}

/* drop-shadow rather than box-shadow, which is what these needed all along.
   Bootstrap gives each indicator 10px transparent top and bottom borders to make
   the tap target usable, and box-shadow is drawn around the border box — so it
   traced a rectangle around that invisible area instead of the visible bar.
   drop-shadow follows the rendered alpha, so it hugs the bar itself. */
.home-banner .carousel-indicators [data-bs-target] {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
}

/* ---------------------------------------------------------------------------
   Weekly program

   Programmes sit in the same list as the congregational prayers, so they need to
   be distinguishable without being separated: the whole point of merging them is
   that the day reads in one pass, top to bottom.

   A left rule and lighter weight, rather than a different colour — colour alone
   would carry the distinction for some readers and not others.
--------------------------------------------------------------------------- */
.jamaat-list .is-program {
    border-left: 3px solid var(--accent, #b3202e);
    padding-left: 0.6rem;
    margin-left: -0.75rem;
}

.jamaat-list .is-program .time {
    font-weight: 500;
}

/* The current day on the week page. */
.prayer-panel.is-today {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* ---------------------------------------------------------------------------
   IMANews pictures

   The archive thumbnail is given a fixed box and cropped to fill it, so a column
   of posts keeps a straight left edge whatever proportions the pictures happen to
   have. It shrinks out of the way on a narrow screen, where a headline and a
   summary matter more than an illustration.
--------------------------------------------------------------------------- */
.post-thumbnail {
    width: 9rem;
    height: 6rem;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .post-thumbnail {
        width: 5rem;
        height: 3.75rem;
    }
}

/* On the article itself the picture is free to be its own shape — it is the
   only thing on that line, so nothing is knocked out of alignment by it. The
   cap stops a tall portrait image filling the screen before the text starts. */
.post-image {
    max-height: 26rem;
    width: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Quill in a Bootstrap column

   Quill's own stylesheet sets `.ql-container { height: 100% }`, which assumes the
   editor is filling a parent of known height. Ours sits in a Bootstrap column
   that takes its height from its contents, and the column is a flex item — so the
   percentage resolved against a height the column was itself deriving from the
   editor. The column ended up exactly as tall as the editor, and the label, the
   toolbar and the help text underneath spilled out of it: on the post editor the
   help text landed on top of the Categories field below.

   Height is handed back to the content. The min-height stays on the container
   (set per editor, since an article wants more room than a callout), and the
   editable area inherits it so clicking anywhere in the empty box puts the cursor
   in the text rather than only the first line being live.
--------------------------------------------------------------------------- */
/* Deliberately over-specific. Quill's stylesheet is pulled in by each editor
   page's Head section, which the layout renders *after* site.css, so a plain
   `.ql-container` here would lose the cascade on equal specificity. Matching the
   theme class as well wins on specificity instead, and keeps working whatever
   order the two files happen to load in. */
.ql-container.ql-snow {
    height: auto;
}

.ql-container.ql-snow .ql-editor {
    height: auto;
    min-height: inherit;
    /* The container grows with the text, so there is nothing to scroll inside —
       and an inner scroller would hide the end of a long article behind a bar
       most people never notice. */
    overflow-y: visible;
}

/* Anything wider than the editor — a pasted table, a long unbroken URL — scrolls
   within it instead of pushing the whole form sideways. */
.ql-container.ql-snow .ql-editor table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}