/* ============================================================
   MOBILE / TABLET RESPONSIVE STYLES
   ============================================================ */


/* ============================================================
   1. TABLET + MOBILE
   < 768px
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       FIXED NAVIGATION
       -------------------------------------------------------- */

    nav[role="navigation"] {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;

        z-index: 9999 !important;

        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    header.cover {
        position: relative !important;

        /*
           Make the mobile hero fill the entire first screen.

           100vh on mobile Safari is based on the LARGEST possible
           viewport (toolbars hidden), not what's actually visible
           when the address bar / bottom toolbar are showing. That
           made content anchored near the bottom of the hero (like
           the scroll arrow below) render below the visible area.

           100svh (small viewport height) always assumes the
           toolbar is visible, so it matches what's actually on
           screen and - unlike 100dvh - never recalculates as the
           toolbar animates, so there's no layout jump after load.
           100vh is kept first as a fallback for browsers without
           svh support.
        */
        min-height: 100vh !important;
        min-height: 100svh !important;

        height: auto !important;

        display: grid !important;

        box-sizing: border-box;
    }


    /*
       The overlay stretches across the entire mobile hero.

       This keeps the dark overlay covering the complete 100vh
       hero, including pages without a hero button.
    */
    header.cover > .bg-black-60 {
        grid-area: 1 / 1;

        width: 100% !important;

        min-height: 100% !important;

        height: auto !important;

        padding-bottom: 5rem !important;

        box-sizing: border-box;

        display: flex !important;

        flex-direction: column !important;
    }


    /*
       Keep navigation and hero content above the overlay.
    */
    header.cover > .bg-black-60 > * {
        position: relative;
    }


    /*
       Keep the hero content clear of the fixed navigation
       while vertically centering it within the full-screen hero.

       IMPORTANT:
       Do not change this transform.

       The individual text elements below are moved instead so
       the hero button and scroll arrow remain exactly where they
       currently sit.
    */
    header.cover .tc,
    header.cover .tc-l {
        width: 100% !important;

        box-sizing: border-box;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;

        padding-top: 10rem !important;

        padding-right: 0.75rem !important;

        padding-bottom: 0 !important;

        padding-left: 0.75rem !important;

        transform: translateY(2.25rem);
    }


    /*
       Override Tachyons' tc-l breakpoint behavior.
    */
    header.cover .tc,
    header.cover .tc-l,
    header.cover .tc h1,
    header.cover .tc h2,
    header.cover .tc-l h1,
    header.cover .tc-l h2 {
        text-align: center !important;
    }


    /* --------------------------------------------------------
       HERO TITLE
       -------------------------------------------------------- */

    header.cover h1 {
        width: 100% !important;

        max-width: 34rem !important;

        margin-top: 0 !important;

        margin-right: auto !important;

        margin-bottom: 0.75rem !important;

        margin-left: auto !important;

        padding: 0 !important;

        font-size: clamp(2.05rem, 8.5vw, 3rem) !important;

        line-height: 1.04 !important;

        text-align: center !important;

        transform: none !important;

        position: relative !important;

        /*
           Moved lower without affecting the button or scroll arrow.
        */
        top: 4rem !important;

        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.85),
            2px 2px 3px rgba(0, 0, 0, 0.55) !important;
    }


    /* --------------------------------------------------------
       HERO DESCRIPTION
       -------------------------------------------------------- */

    header.cover h2 {
        width: 100% !important;

        max-width: 38rem !important;

        margin-top: 0 !important;

        margin-right: auto !important;

        margin-bottom: 0 !important;

        margin-left: auto !important;

        padding: 0 !important;

        font-size: clamp(0.95rem, 4vw, 1.35rem) !important;

        line-height: 1.25 !important;

        text-align: center !important;

        transform: none !important;

        position: relative !important;

        /*
           Move the subtitle down along with the title.
        */
        top: 4rem !important;

        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.85),
            2px 2px 3px rgba(0, 0, 0, 0.5) !important;
    }


    /* --------------------------------------------------------
       READING, PENNSYLVANIA
       -------------------------------------------------------- */

    header.cover .tc h2.homepage-only::after,
    header.cover .tc-l h2.homepage-only::after {
        display: block !important;

        width: 100% !important;

        margin-top: 0rem !important;

        margin-right: auto !important;

        margin-left: auto !important;

        font-size: clamp(0.9rem, 4vw, 1.25rem) !important;

        line-height: 1.15 !important;

        text-align: center !important;

        transform: none !important;

        position: relative !important;

        /*
           Move the location text down as well.
        */
        top: 2rem !important;

        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.85),
            2px 2px 3px rgba(0, 0, 0, 0.5) !important;
    }


    /* --------------------------------------------------------
       HERO BUTTON
       -------------------------------------------------------- */

    header.cover .hero-button {
        position: absolute !important;

        left: 50% !important;

        bottom: 1.25rem !important;

        display: inline-block !important;

        width: auto !important;

        margin: 0 !important;

        padding-top: 0.55rem !important;

        padding-right: 1.3rem !important;

        padding-bottom: 0.55rem !important;

        padding-left: 1.3rem !important;

        max-width: calc(100% - 2rem);

        box-sizing: border-box;

        font-size: 1.25rem !important;

        line-height: 1.2 !important;

        text-align: center !important;

        transform: translateX(-50%) !important;
    }

    header.cover .hero-button:hover {
        transform: translateX(-50%) translateY(-2px) !important;
    }


    /* --------------------------------------------------------
       MOBILE SCROLL ARROW
       -------------------------------------------------------- */

    /*
       The .scroll-arrow is rendered AFTER the hero by Hugo.

       Pull it upward so it visually sits at the bottom of the
       hero, just like the desktop version.

       IMPORTANT: use transform, not margin-top, to move it.
       A negative margin-top doesn't just move this element - it
       collapses flow space, which drags every element after it
       (profile card, etc.) up the page too. transform is purely
       visual and leaves the document flow (and everything below)
       untouched. This mirrors the desktop rule further down,
       which already uses transform for the same reason.
    */
    .scroll-arrow {
        position: relative !important;

        transform: translateY(-4.5rem) !important;

        z-index: 20 !important;

        pointer-events: none;
    }

    .scroll-arrow figure,
    .scroll-arrow img {
        pointer-events: auto;
    }


    /*
       Keep the arrow centered.
    */
    .scroll-arrow {
        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        text-align: center !important;

        box-sizing: border-box;
    }

    .scroll-arrow figure {
        display: block !important;

        width: fit-content !important;

        max-width: 100% !important;

        margin-top: 0 !important;

        margin-right: auto !important;

        margin-bottom: 0 !important;

        margin-left: auto !important;

        float: none !important;

        text-align: center !important;
    }

    .scroll-arrow img {
        display: block !important;

        width: auto !important;

        max-width: 80px !important;

        height: auto !important;

        margin-right: auto !important;

        margin-left: auto !important;

        float: none !important;
    }


    /* --------------------------------------------------------
       MAIN CONTENT
       -------------------------------------------------------- */

    main > article {
        margin-top: 0 !important;

        padding-top: 2rem !important;
    }


    /* ========================================================
       2. PASTOR / BIO SECTION
       ======================================================== */

    .scroll-section {
        width: 100% !important;

        height: auto !important;

        margin-left: 0 !important;

        padding-top: 2rem !important;

        padding-bottom: 2.5rem !important;

        box-sizing: border-box;
    }

    .sticky-wrapper {
        position: static !important;

        width: 100% !important;

        height: auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }

    .bio-layout {
        width: 100% !important;

        max-width: 42rem !important;

        margin-right: auto !important;

        margin-left: auto !important;

        padding-right: 1rem !important;

        padding-left: 1rem !important;

        box-sizing: border-box;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 1.75rem !important;
    }

    .profile-card {
        width: 100% !important;

        flex: none !important;

        text-align: center !important;
    }

    .profile-card figure {
        margin-right: auto !important;

        margin-left: auto !important;
    }

    .profile-card figure img {
        width: clamp(160px, 45vw, 200px) !important;

        height: clamp(160px, 45vw, 200px) !important;

        max-width: 100% !important;

        aspect-ratio: 1 / 1 !important;

        margin-right: auto !important;

        margin-left: auto !important;
    }

    .profile-card h2 {
        width: 100% !important;

        margin-top: 0.75rem !important;

        font-size: clamp(1.2rem, 5vw, 1.5rem) !important;

        line-height: 1.25 !important;

        white-space: normal !important;

        overflow-wrap: anywhere;

        text-align: center !important;
    }

    .bio-text {
        width: 100% !important;

        max-width: 42rem !important;

        flex: none !important;

        margin-right: auto !important;

        margin-left: auto !important;

        font-size: clamp(1rem, 3.8vw, 1.2rem) !important;

        line-height: 1.6 !important;

        opacity: 1 !important;

        transform: none !important;

        text-align: center !important;
    }


    @supports (animation-timeline: view()) {

        .scroll-section {
            height: auto !important;
        }

        .sticky-wrapper {
            position: static !important;

            height: auto !important;
        }

        .profile-card,
        .bio-text {
            animation: none !important;

            transform: none !important;

            opacity: 1 !important;
        }
    }


    /* ========================================================
       3. COLORED SECTION
       ======================================================== */

    .color-section {
        width: 100vw !important;

        margin-left: calc(-50vw + 50%) !important;

        padding-top: 2.25rem !important;

        padding-right: 1rem !important;

        padding-bottom: 2.25rem !important;

        padding-left: 1rem !important;

        box-sizing: border-box;
    }

    .color-section-inner {
        width: 100% !important;

        max-width: 42rem !important;

        margin-right: auto !important;

        margin-left: auto !important;

        text-align: center !important;
    }

    .color-section-inner h2 {
        width: 100% !important;

        max-width: 100% !important;

        margin-top: 0 !important;

        margin-right: auto !important;

        margin-bottom: 1.25rem !important;

        margin-left: auto !important;

        font-size: clamp(1.7rem, 7vw, 2.2rem) !important;

        line-height: 1.15 !important;

        text-align: center !important;

        transform: none !important;
    }

    .color-section-inner p,
    .color-section-inner li {
        font-size: clamp(1rem, 4vw, 1.15rem) !important;

        line-height: 1.55 !important;
    }

    .color-section-inner ul {
        margin-right: 0 !important;

        margin-left: 0 !important;

        padding-left: 0 !important;

        text-align: center !important;
    }

    .color-section-inner .hero-button {
        position: relative !important;

        left: auto !important;

        bottom: auto !important;

        transform: none !important;
    }


    /* --------------------------------------------------------
       SERVICE TIMES
       -------------------------------------------------------- */

    .service-time {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 0 !important;

        margin-top: 0.75rem !important;

        margin-bottom: 0.75rem !important;

        text-align: center !important;
    }

    .service-time span {
        display: block !important;

        max-width: 100% !important;

        text-align: center !important;
    }

    .color-section-text-top {
        transform: none !important;

        line-height: 1.15 !important;
    }


    /* ========================================================
       4. FOOTER
       ======================================================== */

    footer > div {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 0.5rem !important;

        padding-right: 1rem !important;

        padding-left: 1rem !important;

        box-sizing: border-box;

        text-align: center !important;
    }

    footer p,
    footer a {
        max-width: 100% !important;

        text-align: center !important;

        overflow-wrap: anywhere;
    }
}


/* ============================================================
    5. TABLET / SMALL DESKTOP HERO TITLES
    768px - 959px
    ============================================================ */

@media (min-width: 768px) and (max-width: 959px) {

    header.cover h1,
    header.cover div.f2.fw2.lh-title {
        font-size: clamp(2.75rem, 6vw, 4rem) !important;

        transform: translateY(4rem) !important;
    }

    header.cover h2 {
        position: relative;

        top: 4rem;
    }

    header.cover h1 {
        max-width: 34rem;
    }
}


/* ============================================================
    6. VERY SMALL PHONES
    <= 420px
    ============================================================ */

@media (max-width: 420px) {

    header.cover {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }

    header.cover > .bg-black-60 {
        min-height: 100% !important;

        padding-bottom: 5rem !important;
    }

    header.cover .tc,
    header.cover .tc-l {
        padding-top: 10rem !important;

        padding-right: 0.65rem !important;

        padding-bottom: 0 !important;

        padding-left: 0.65rem !important;

        /*
           Keep the original container position so the button
           and arrow are unaffected.
        */
        transform: translateY(2.25rem);
    }

    header.cover h1 {
        font-size: clamp(1.9rem, 9.5vw, 2.55rem) !important;

        line-height: 1.04 !important;

        max-width: 22rem !important;

        /*
           Move only the title lower.
        */
        top: 4rem !important;
    }

    header.cover h2 {
        font-size: clamp(0.9rem, 4.5vw, 1.2rem) !important;

        line-height: 1.25 !important;

        max-width: 20rem !important;

        /*
           Move only the subtitle lower.
        */
        top: 4rem !important;
    }

    header.cover .tc h2.homepage-only::after,
    header.cover .tc-l h2.homepage-only::after {
        font-size: clamp(0.8rem, 4vw, 1.05rem) !important;

        line-height: 1.15 !important;

        margin-top: 0rem !important;

        /*
           Move only the location text lower.
        */
        top: 2rem !important;
    }

    header.cover .hero-button {
        bottom: 1rem !important;

        padding-top: 0.5rem !important;

        padding-right: 1.15rem !important;

        padding-bottom: 0.5rem !important;

        padding-left: 1.15rem !important;

        font-size: 1.25rem !important;
    }

    .color-section {
        padding-right: 0.75rem !important;

        padding-left: 0.75rem !important;
    }

    .color-section-inner h2 {
        font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
    }

    .bio-layout {
        padding-right: 0.75rem !important;

        padding-left: 0.75rem !important;
    }
}