/*==================================================================
  AL-FAJR FOUNDATION — RESPONSIVE HARDENING

  theme/layout/sections are written mobile-first, so this sheet is not
  where the layout is built — it is where the layout is *corrected* for
  small screens. Everything here falls into one of five jobs:

    1. nothing may overflow the viewport horizontally
    2. nothing important may be hidden — only compressed
    3. every interactive target stays reachable with a thumb
    4. vertical rhythm tightens so a phone screen carries content,
       not padding
    5. overlays (drawer, lightbox, video) fit a phone's real viewport

  Loaded after `sections` and before `rtl`, so Urdu overrides still win.
  Breakpoints used: 900 (tablet), 700 (large phone), 560, 420 (small).
==================================================================*/

/*==================================================================
  1. OVERFLOW CONTAINMENT

  A single wide child used to push the whole page sideways, which is
  what made the site feel broken on a phone. `clip` rather than
  `hidden`: `hidden` on an ancestor silently kills `position: sticky`
  on the header.
==================================================================*/

html, body { overflow-x: clip; }

/* Long words, URLs, IBANs and email addresses are the usual culprits. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote, label, summary {
    overflow-wrap: break-word;
}

/* These are unbreakable strings by nature — allow a mid-token break. */
.ltr, code, pre, .bank-box dd, .contact-value, .topbar-item span {
    overflow-wrap: anywhere;
}

/* Anything embedded from the database or a third party stays boxed in. */
.prose iframe,
.prose img,
.prose video { max-width: 100%; }

.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Editor-pasted tables are the one thing that legitimately needs to
   scroll on its own rather than reflow. */
.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

/*==================================================================
  2. TABLET — 900px and below
==================================================================*/

@media (max-width: 900px) {
    /* Utility-bar rows are short; give the tap targets some height. */
    .topbar-item { padding-block: .45rem; }

    /* The map is a 500px block from the settings field. That is over
       half a phone screen for something most visitors scroll past. */
    .contact-map iframe { height: 380px; }
}

/*==================================================================
  3. LARGE PHONE — 700px and below
==================================================================*/

@media (max-width: 700px) {
    /* A shorter sticky header leaves more of the viewport for content,
       and scroll-padding-top follows the token automatically. */
    :root {
        --header-h: 66px;
        --topbar-h: 34px;
        --section-y: clamp(2.5rem, 8vw, 3.5rem);
    }

    /* Section heads are centred copy blocks on a phone whether or not
       the desktop layout centred them. */
    .section-head h2, .section-head .lede { max-width: 100%; }

    .section-head { margin-bottom: var(--sp-6); }

    /* A row that puts a heading beside a "view all" link has no room
       for two columns. */
    .section-head--row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
    }

    .hero h1, .page-header h1 { max-width: 100%; }
    .hero-inner { padding-block: clamp(2.25rem, 8vw, 3.25rem) clamp(2.25rem, 7vw, 3rem); }
    .hero-lede { margin-top: var(--sp-4); }
    .hero-hadith { padding: var(--sp-5) var(--sp-4); }

    /* Cards and panels: trim the inner padding, keep the outer gutter. */
    .card-body,
    .action,
    .tier,
    .feature,
    .contact-form,
    .counter-card { padding: var(--sp-5); }

    .counter-card { margin-top: calc(-1 * var(--sp-5)); }

    .contact-map iframe { height: 300px; }

    .prose h2 { margin-top: var(--sp-6); }
    .prose h3 { margin-top: var(--sp-5); }

    /* Drawer submenu rows and nav rows both need a 44px target. */
    .nav-link { min-height: 3rem; }
    .nav-submenu a { min-height: 2.75rem; display: flex; align-items: center; }
}

/*==================================================================
  4. FORM CONTROLS

  iOS Safari zooms the page whenever a focused control renders below
  16px. The body scale is deliberately smaller than that, so controls
  are pinned to 16px on touch-sized screens — this is a zoom fix, not
  a typography choice.
==================================================================*/

@media (max-width: 820px) {
    .input, .textarea, .select { font-size: 1rem; padding: .75em .9em; }
    .textarea { min-height: 7rem; }

    /* 44px minimum on anything tappable. */
    .btn { min-height: 2.75rem; }
    .field { margin-bottom: var(--sp-4); }
}

/*==================================================================
  5. SMALL PHONE — 560px and below
==================================================================*/

@media (max-width: 560px) {
    .section-head h2 { font-size: var(--step-3); }

    /* Stacked full-width actions read as a clear sequence; two half
       buttons side by side end up with wrapped, ragged labels. */
    .btn-group,
    .hero-actions,
    .page-404 .btn-group,
    .cta-band .btn-group,
    .form-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .btn-group .btn,
    .hero-actions .btn,
    .page-404 .btn,
    .cta-band .btn,
    .form-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    /* Not the header button — it sits beside the menu toggle. */
    .header-actions .btn { width: auto; min-height: 0; }

    .btn { padding: .75em 1.1em; }

    /* Two columns of statistics is the floor; one column wastes a
       whole screen of scrolling. */
    .counters { gap: var(--sp-3); }
    .counter-icon { width: 2.2rem; height: 2.2rem; font-size: .95rem; }

    .dept-figures { gap: var(--sp-3) var(--sp-4); }

    /* Gallery overlays are decoration; at this width the caption
       covers the photo it describes. */
    .gallery-overlay { padding: var(--sp-3); }
    .gallery-overlay p { display: none; }

    .video-modal { padding: var(--sp-3); }
    .contact-map iframe { height: 260px; }
}

/*==================================================================
  6. VERY SMALL — 420px and below
==================================================================*/

@media (max-width: 420px) {
    :root { --gutter: .85rem; }

    .card-body,
    .action,
    .tier,
    .tier-home-card,
    .feature,
    .contact-form,
    .counter-card { padding: var(--sp-3); }

    .tier-home-card { flex-wrap: wrap; gap: var(--sp-2); }
    .tier-home-pricing { width: 100%; justify-content: space-between; padding-top: var(--sp-2); border-top: 1px solid rgba(255, 255, 255, 0.08); }

    .breadcrumb { font-size: .72rem; }
    .chip { font-size: .68rem; }
}

/*==================================================================
  7. OVERLAYS

  `dvh` tracks the viewport as mobile browser chrome slides away;
  `vh` does not, which is why full-height overlays used to have their
  controls cut off at the bottom.
==================================================================*/

@supports (height: 100dvh) {
    .lb-panel { height: 100dvh; }

    /* Only the off-canvas drawer — above 1140px .site-nav is an inline
       list inside the header and must keep its content height. */
    @media (max-width: 1140px) {
        .site-nav { height: 100dvh; }
    }
}

@media (max-width: 700px) {
    .lb-panel { padding: var(--sp-4) var(--sp-3); gap: var(--sp-3); }

    /* Side-by-side arrows and image leaves the image about 60% of the
       width. Float the arrows over the photo instead. */
    .lb-stage { position: relative; gap: 0; }

    .lb-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        background: rgba(4, 18, 37, .62);
        border-color: rgba(255, 255, 255, .45);
    }

    .lb-prev { inset-inline-start: 0; }
    .lb-next { inset-inline-end: 0; }

    .lb-img { max-height: 64vh; }

    .lb-title { font-size: var(--step--1); }
    .lb-bottombar { font-size: .72rem; }
}

/*==================================================================
  8. COARSE POINTERS

  Hover-only affordances never fire on a touchscreen, and the lift
  transform on tap reads as a glitch.
==================================================================*/

@media (hover: none) {
    .btn:hover { transform: none; }
    .card:hover { transform: none; }
    .card:hover .card-media img { transform: none; }
    .gallery-item:hover img { transform: none; }
    .gallery-play:hover { transform: translate(-50%, -50%); }
}

/*==================================================================
  9. PRINT

  theme.css already hides the chrome; these are the overlays and
  banners it does not know about.
==================================================================*/

@media print {
    .cta-band, .menu-toggle,
    .alfajr-lightbox, .video-modal { display: none !important; }
}