/* ==========================================================================
   NFF — Mobile refinements
   --------------------------------------------------------------------------
   Loaded last so it can correct the theme without touching style.css.
   Every rule here answers a problem measured at 375px with a real browser,
   not a guess. Desktop is untouched: everything is inside a max-width query
   unless noted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOUCH TARGETS
   Measured: breadcrumb links 43x17, footer menu links 21px tall, hamburger
   33x33, logo links 51x20. The WCAG 2.5.5 / platform guideline is 44x44.
   Padding is used rather than height so the text stays where it sits.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Primary nav toggle — the main way to navigate on a phone */
    .th-menu-toggle,
    .th-header .th-menu-toggle,
    .header-button .th-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Breadcrumb trail under the page banner — measured 43x17 before */
    .breadcumb-menu li a,
    .breadcumb-menu li {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.5;
    }

    /* Footer quick links / programme lists — measured 21px tall before */
    .footer-widget .menu li a,
    .widget_nav_menu .menu li a,
    .menu-all-pages-container .menu li a {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
        line-height: 1.45;
    }

    /* Logo links carry no padding of their own */
    .mobile-logo a,
    .about-logo a,
    .header-logo a {
        display: inline-block;
        padding: 9px 0;
    }

    /* Inline toggles, "Read more" and small pill buttons.
       min-height is used rather than padding alone because several of these
       carry a more specific padding rule in the theme that would win. */
    .link-btn,
    .link-btn.style2,
    [id$="BioToggle"],
    .gl-readmore-btn,
    .th-btn,
    .filter-menu a,
    .filter-menu button {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Icon-only buttons (search, close, filter) sat at 36x36 or smaller */
    button:not(.navbar-toggler):not(.btn-close) {
        min-height: 44px;
    }
    button.icon-btn,
    .search-btn,
    .searchBoxToggler {
        min-width: 44px;
        min-height: 44px;
    }

    /* Contact details are among the most-tapped things on a phone — tapping a
       number to call or an address to email is a primary mobile action, so
       these get a full target even though they look like plain text.
       Inline links inside a sentence are deliberately NOT included: padding
       those would break the line box. WCAG 2.5.5 exempts them for that reason. */
    a[href^="tel:"],
    a[href^="mailto:"],
    .th-widget-contact a,
    .info-card .box-title a,
    .footer-links a,
    .footer-legal a {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
        line-height: 1.45;
    }

    /* Category filters and card meta tags — measured at 42px and 26px */
    .filter-menu a,
    .filter-menu-active a,
    .blog-meta a,
    .story-filter a,
    .category-filter a {
        display: inline-block;
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.4;
    }

    /* Social icon rows */
    .th-social a,
    .footer-social a,
    .social-btn a {
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Display type authored for desktop is oversized on a 375px screen. clamp()
   keeps it fluid instead of stepping between fixed sizes.
   Inline style="font-size:..." wins over this, which is why the few inline
   cases were changed in the templates themselves.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .hero-title,
    .breadcumb-title {
        font-size: clamp(26px, 7.2vw, 38px) !important;
        line-height: 1.25;
        word-break: break-word;
    }

    .sec-title {
        font-size: clamp(22px, 5.8vw, 30px) !important;
        line-height: 1.3;
    }

    .sub-title,
    .sec-text {
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.7;
    }

    .box-title,
    .feature-card .box-title {
        font-size: clamp(17px, 4.6vw, 20px) !important;
        line-height: 1.4;
    }

    /* Never let body copy drop below comfortable reading size */
    p, li, .box-text {
        font-size: max(15px, 1em);
        line-height: 1.75;
    }

    /* Preloader wordmark was rendering at 80px */
    .preloader .loader,
    .preloader .loading-text {
        font-size: clamp(38px, 12vw, 64px) !important;
    }
}

/* --------------------------------------------------------------------------
   3. LAYOUT & SPACING
   Desktop section padding leaves too much dead space on a phone, and long
   unbroken strings (URLs, emails) are the usual cause of sideways scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .space,
    .space-top    { padding-top: 56px; }
    .space,
    .space-bottom { padding-bottom: 56px; }

    /* Measured at 456-491px on an 844px screen — over half the viewport spent
       on a title, pushing real content below the fold. Trimmed to roughly a
       third, which still reads as a banner. */
    .breadcumb-wrapper {
        padding-top: 56px;
        padding-bottom: 40px;
    }
    .breadcumb-wrapper .breadcumb-content { padding-top: 0; padding-bottom: 0; }
    .breadcumb-menu { margin-bottom: 0; }

    /* Anything that can carry an unbreakable string */
    p, li, td, dd, .box-text, .sec-text, a[href^="mailto"], a[href^="http"] {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Wide content must scroll inside itself, never push the page */
    .table-responsive,
    table { max-width: 100%; }

    /* Buttons go full width so they are easy to hit, but only when alone */
    .form-btn .th-btn,
    .th-btn.w-100-mobile { width: 100%; text-align: center; }

    /* Stacked CTA rows */
    .gl-cta-row,
    .ty-actions,
    .gi-donate { text-align: center; }
    .gl-cta-row .th-btn,
    .ty-actions .th-btn { width: 100%; }
}

/* Pill tags were display:inline, so a tag wrapping across two lines split its
   border and background in half and read as clipped text. */
.partner-tag {
    display: inline-block;
    margin: 4px 3px;
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 13px;
    line-height: 1.35;
}

/* Keep the floating back-to-top button clear of page content. */
.scroll-top {
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 767.98px) {
    footer .container { padding-bottom: 8px; }
}

/* The mobile header logo was a bare <p>: not tappable, and it ignored the
   logo configured in the admin. Now a home link sized for touch. */
.nff-mobile-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 4px;
    text-decoration: none;
}
.nff-mobile-logo img {
    max-height: 46px;
    width: auto;
    object-fit: contain;
}
.nff-mobile-logo span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    letter-spacing: .3px;
}
@media (max-width: 400px) {
    .nff-mobile-logo span { font-size: 12.5px; }
}

/* Leaflet's own zoom controls ship at 30px. */
.leaflet-touch .leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
}

/* Card image links wrap a 250px image but are display:inline, so their box
   collapses to the line box. The image is still tappable, but making the
   anchor a block makes the hit area match what the user sees. */
.blog-img > a,
.service-img > a,
.event-img > a,
.team-img > a,
.portfolio-img > a {
    display: block;
}

/* Card titles link to the same place as the image above them. Grow the hit
   area with padding and pull it back with margin, so spacing is unchanged. */
@media (max-width: 991.98px) {
    .blog-content .box-title a,
    .service-content .box-title a,
    .event-content .box-title a {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
        margin-top: -11px;
        margin-bottom: -11px;
    }
}

/* Category filter chips. Previously inline styles, which a stylesheet cannot
   override — so they stayed at 42px on mobile no matter what was declared. */
.nff-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #f0f0f0;
    color: #555;
    transition: background .2s ease, color .2s ease;
}
.nff-chip:hover { background: #e0e0e0; color: #333; }
.nff-chip.is-active { background: var(--theme-color, #1D7A37); color: #fff; }
.nff-chip:focus-visible { outline: 3px solid rgba(29,122,55,.4); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .nff-chip { min-height: 44px; padding: 11px 18px; }
}

/* FAQ answers were indented 42px to align under the numbered question. On a
   390px screen that plus the card padding left roughly four words per line.
   The indent is a desktop nicety, so it is dropped on small screens. */
.faq-answer-body { padding-left: 42px; }

@media (max-width: 767.98px) {
    .faq-answer-body { padding-left: 0; }
    .accordion-card.style1 .accordion-body { padding-left: 16px; padding-right: 16px; }
    .accordion-card.style1 .accordion-button { padding-left: 14px; padding-right: 14px; }
    .gl-faq-num { margin-right: 10px; }
}

/* --------------------------------------------------------------------------
   4. FORMS
   iOS zooms the page when a focused input has a font-size under 16px. That
   zoom is the single most common "the mobile site is broken" complaint.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    input, select, textarea,
    .form-control, .form-select {
        font-size: 16px !important;
        min-height: 46px;
        padding: 11px 14px;
    }

    textarea, textarea.form-control { min-height: 110px; }

    label, .form-label, .gl-label, .dn-label { font-size: 14px; }

    .form-check-input { width: 20px; height: 20px; margin-top: 2px; }
    .form-check-label { padding-left: 4px; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   5. MEDIA
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    img, svg, video, iframe { max-width: 100%; height: auto; }

    /* Hero/banner images authored at a fixed desktop height */
    .nl-view-image,
    .blog-img img,
    .event-img img { height: auto !important; max-height: 240px; object-fit: cover; }

    iframe[src*="google.com/maps"],
    iframe[src*="youtube"] { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; }
}

/* --------------------------------------------------------------------------
   6. SAFETY NET
   A single element with a fixed desktop width is enough to make the whole
   page scroll sideways. This bounds the damage without hiding content.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    .container, .container-fluid, .row { max-width: 100%; }
    .row { margin-left: 0; margin-right: 0; }
    .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
}

/* --------------------------------------------------------------------------
   7. MOTION
   Respect the user's reduced-motion preference — applies at every width.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}