/* ==========================================================================
   Kafeel Foundation — Responsive rules
   Breakpoints: 1199px (small laptop) · 991px (tablet) · 767px (large phone)
                575px (phone) · 400px (small phone)
   Load this file AFTER style.css
   ========================================================================== */

/* Small laptops
   ========================================================================== */
@media (max-width: 1199px) {
  :root {
    --gutter: 20px;
  }

  .nav__list > li > a {
    padding: 10px 11px;
    font-size: 0.9rem;
  }

  .brand img {
    height: 48px;
  }

  .hero__badge {
    left: 0;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    row-gap: 44px;
  }
}

/* Tablets
   ========================================================================== */
@media (max-width: 991px) {
  .topbar__list li.topbar__hide-md {
    display: none;
  }

  /* Mobile navigation drawer */
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    padding: 96px 24px 40px;
    background: #fff;
    box-shadow: -20px 0 60px rgba(6, 18, 64, 0.18);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    z-index: 102;
    height: 100vh;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .nav__mobile-cta {
    display: block;
  }

  .site-nav__close {
    display: grid;
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 1.3rem;
    color: var(--navy);
    cursor: pointer;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav__list > li > a {
    padding: 14px 12px;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .nav__mobile-cta {
    margin-top: 24px;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 64, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 50;
  }

  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .header-actions .btn--donate-desktop {
    display: none;
  }

  /* Layout stacking */
  .hero__grid,
  .split,
  .split--sidebar {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    order: -1;
  }

  .hero__visual img {
    aspect-ratio: 16 / 10;
  }

  .hero__badge {
    left: 16px;
    bottom: 16px;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .map-frame iframe {
    height: 360px;
  }
}

/* Large phones
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --section-y: 56px;
  }

  .topbar__inner {
    justify-content: center;
    text-align: center;
  }

  .topbar__list li.topbar__hide-sm {
    display: none;
  }

  .site-header__inner {
    min-height: 70px;
  }

  .brand img {
    height: 42px;
  }

  .grid {
    gap: 20px;
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .hero__cta .btn {
    flex: 1 1 100%;
  }

  .hero__badge {
    position: static;
    margin-top: 16px;
    max-width: none;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .card__body,
  .method,
  .info-tile,
  .sidebar-block {
    padding: 22px;
  }

  .detail-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .detail-list .v {
    text-align: left;
  }

  .qr {
    flex-direction: column;
    align-items: flex-start;
  }

  .float-stack {
    right: 14px;
    bottom: 14px;
  }

  .float-btn {
    width: 48px;
    height: 48px;
  }

  .newsletter {
    flex-direction: column;
  }

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

/* Phones
   ========================================================================== */
@media (max-width: 575px) {
  :root {
    --gutter: 16px;
  }

  body {
    font-size: 1rem;
  }

  .grid--4 {
    grid-template-columns: 1fr;
  }

  .btn {
    padding: 13px 22px;
  }

  .quote,
  .stat,
  .step {
    padding: 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .pagination a {
    min-width: 40px;
    height: 40px;
  }
}

/* Small phones
   ========================================================================== */
@media (max-width: 400px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .amounts .amount {
    flex: 1 1 calc(50% - 10px);
    padding: 12px 10px;
    text-align: center;
  }

  .hero__trust {
    gap: 10px;
  }
}

/* Print
   ========================================================================== */
@media print {
  .topbar,
  .site-header,
  .float-stack,
  .cta-band,
  .site-footer {
    display: none !important;
  }

  body {
    color: #000;
  }

  .section {
    padding-block: 12px;
  }
}

/* Donate page + gallery
   ========================================================================== */
@media (max-width: 991px) {
  .donate-cols,
  .confirm-cols {
    grid-template-columns: 1fr;
  }

  .pay-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  .donate-cols {
    margin-bottom: 0;
  }

  .pay-card {
    grid-template-columns: 1fr;
  }

  .qr-box {
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .amount-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
  }

  .freq-toggle label {
    padding: 10px 20px;
  }

  .panel__head h2 {
    font-size: 1.15rem;
  }

  .video-card__play {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }
}

@media (max-width: 575px) {
  .lightbox {
    padding: 70px 16px 76px;
  }

  .lightbox__nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .lightbox__nav--prev {
    left: 24px;
  }

  .lightbox__nav--next {
    right: 24px;
  }

  .lightbox__tool {
    width: 40px;
    height: 40px;
  }

  .pay-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .acc-row {
    flex-wrap: wrap;
  }

  .lightbox__close {
    top: 12px;
    right: 12px;
  }
}

/* Detail pages, switchers, lightbox controls
   ========================================================================== */
@media (max-width: 991px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .sticky-aside {
    position: static;
  }

  .lightbox {
    padding: 76px 68px 44px;
  }

  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 767px) {
  .topbar__tools {
    gap: 10px;
  }

  .topbar__socials {
    display: none;
  }

  .switcher:last-of-type {
    border-right: 0;
    padding-right: 0;
  }

  .fact-table th {
    width: 50%;
  }
}
/* ==========================================================================
   Kafeel Foundation — responsive corrections
   --------------------------------------------------------------------------
   Append to the END of assets/css/responsive.css.
   Nothing above is changed; these rules only add or override.
   ========================================================================== */


/* ==========================================================================
   1. The off-canvas menu was reachable by scrolling sideways
   --------------------------------------------------------------------------
   The drawer is position:fixed and pushed off-screen with translateX(100%).

   body already carries overflow-x: hidden, but that cannot help here: a fixed
   element is positioned against the viewport, not against body, so an
   ancestor's overflow never clips it. The menu was still painted, still in the
   tab order, and still findable by dragging the page sideways.

   visibility is the right tool. It removes the drawer from rendering AND from
   the tab order, so a keyboard user no longer tabs into an invisible menu.
   It still animates, because visibility is deferred until the transform ends.
   ========================================================================== */

@media (max-width: 991px) {

    .site-nav {
        visibility: hidden;
        pointer-events: none;
        /* Delay hiding until the slide-out finishes, or it vanishes mid-animation. */
        transition: transform var(--transition), visibility 0s linear .3s;
    }

    .site-nav.is-open {
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--transition), visibility 0s;
    }
}

/* clip rather than hidden: it stops sideways scrolling without turning the
   element into a scroll container, which would break position:sticky inside. */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100%;
}


/* ==========================================================================
   2. Payment method tabs
   --------------------------------------------------------------------------
   Six across on desktop. The template already does this; the rules below keep
   the logos legible as the strip narrows instead of squeezing all six until
   the labels wrap to three lines.
   ========================================================================== */

@media (max-width: 991px) {
    .pay-tabs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

@media (max-width: 575px) {
    .pay-tabs { grid-template-columns: repeat(2, 1fr); }

    .pay-tab { padding: 10px 6px; }
    .pay-tab span { font-size: .78rem; }
    .pay-tab__logo { width: 28px; height: 28px; }
}


/* ==========================================================================
   3. Things that overflow on a narrow screen
   ========================================================================== */

@media (max-width: 767px) {

    /* Account numbers and IBANs are long unbroken strings — without this they
       push the whole card wider than the screen. */
    .copy-value,
    .acc-row .value {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .acc-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Tables inside admin-authored article text. */
    .detail-body table,
    .prose table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Long URLs in blog posts. */
    .detail-body a,
    .prose a {
        overflow-wrap: anywhere;
    }

    /* The Google Maps embed has a fixed height that looks wrong on a phone. */
    .map-frame iframe {
        height: 300px;
    }

    /* The QR image is 150px in the template; on a phone it can be bigger. */
    .qr-box img {
        width: min(180px, 60vw);
        height: auto;
    }
}


/* ==========================================================================
   4. Donation form on small screens
   ========================================================================== */

@media (max-width: 767px) {

    /* Preset amounts: two per row rather than one, so step 1 is not a
       column of eight buttons the donor has to scroll past. */
    .amount-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .amount-grid label {
        padding: 12px 8px;
        font-size: .95rem;
    }

    .freq-toggle {
        width: 100%;
    }

    .freq-toggle label {
        flex: 1;
        text-align: center;
    }

    .panel {
        padding: 18px 16px;
    }

    .panel__head h2 {
        font-size: 1.05rem;
    }

    /* The two-column grids inside the request form. */
    .link-request-inline .grid--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .amount-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   5. Header and top bar
   ========================================================================== */

@media (max-width: 767px) {

    /* The two switchers plus seven social icons do not fit. Social icons are
       the least useful of the three on a phone — the footer has them too. */
    .topbar__socials {
        display: none;
    }

    .topbar__inner {
        justify-content: space-between;
        gap: 8px;
    }

    .switcher select {
        font-size: .8rem;
        padding-inline: 4px;
    }
}

@media (max-width: 575px) {
    .brand img {
        width: 130px;
        height: auto;
    }

    /* The floating buttons sit over the CTA band on short screens. */
    .float-stack {
        inset-block-end: 14px;
        inset-inline-end: 14px;
    }

    .float-btn {
        width: 46px;
        height: 46px;
        font-size: 1.15rem;
    }
}


/* ==========================================================================
   6. Cards and grids
   ========================================================================== */

@media (max-width: 767px) {

    /* Long cause and project titles were clipping their card. */
    .card__body h3 {
        overflow-wrap: anywhere;
    }

    .progress__meta {
        flex-wrap: wrap;
        gap: 4px;
        font-size: .82rem;
    }

    .section-head--split {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }

    .cta-band__actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .cta-band__actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 150px;
    }
}


/* ==========================================================================
   7. Right-to-left on mobile
   --------------------------------------------------------------------------
   In Urdu and Arabic the drawer must slide in from the left, not the right.
   ========================================================================== */

@media (max-width: 991px) {

    [dir="rtl"] .site-nav {
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        box-shadow: 20px 0 60px rgba(6, 18, 64, .18);
    }

    [dir="rtl"] .site-nav.is-open {
        transform: translateX(0);
    }

    [dir="rtl"] .site-nav__close {
        right: auto;
        left: 22px;
    }
}