/* ============================================================
   SITE-WIDE / HOMEPAGE STYLES
   ============================================================ */


/* ============================================================
   1. LOGO
   ============================================================ */

header nav img {
    max-height: 50px !important;
    width: auto !important;
}


/* ============================================================
   2. HERO / BANNER
   ============================================================ */

header.cover {
    min-height: 80vh !important;
    height: auto !important;

    display: grid !important;

    position: relative !important;

    box-sizing: border-box;
}


/*
   The dark overlay occupies the entire hero.
*/
header.cover > .bg-black-60 {
    grid-area: 1 / 1;

    width: 100% !important;

    min-height: 100% !important;
    height: auto !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;
}


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


/* ============================================================
   3. HERO CONTENT
   ============================================================ */

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

    box-sizing: border-box;

    padding: 2rem 1rem !important;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

header.cover .tc,
header.cover .tc-l {
    text-align: center !important;
}

header.cover .tc h1,
header.cover .tc h2,
header.cover .tc-l h1,
header.cover .tc-l h2 {
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   4. MAIN CONTENT
   ============================================================ */

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

    padding-top: 2rem !important;
}


/* ============================================================
   5. FIXED NAVIGATION
   ============================================================ */

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

    top: 0;

    width: 100%;

    z-index: 9999;

    background-color: rgba(0, 0, 0, 0.8) !important;

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


/* ============================================================
   6. HERO TITLE
   ============================================================ */

header h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);

    /*
       The theme applies Tachyons' "fw2" class (font-weight: 200)
       to this title. Desktop fallback fonts usually don't ship a
       true ultra-light face, so browsers round that up to
       something readable. Mobile Safari's system font (San
       Francisco) DOES have a real 200-weight face, so it renders
       exactly as thin as requested there, which looks broken.

       Pin the weight explicitly instead of leaving it to
       fallback-font luck, so it looks the same everywhere.
    */
    font-weight: 600 !important;

    text-shadow:
        2px 2px 0px rgba(0,0,0,0.8),
        4px 4px 0px rgba(0,0,0,0.6),
        8px 8px 15px rgba(0,0,0,0.5) !important;

    transition: transform 0.3s ease;

    max-width: 900px;

    width: 100%;

    margin-inline: auto;
}


/* ============================================================
   7. HERO SUBTITLE
   ============================================================ */

header h2 {
    font-size: clamp(1rem, 2.5vw, 2rem);

    text-shadow:
        1px 1px 0px rgba(0,0,0,0.8),
        2px 2px 0px rgba(0,0,0,0.6),
        4px 4px 8px rgba(0,0,0,0.5) !important;

    transition: transform 0.3s ease;

    max-width: 700px;

    width: 100%;

    margin-inline: auto;
}


/* ============================================================
   8. READING, PENNSYLVANIA
   ============================================================ */

header .tc h2.homepage-only::after,
header .tc-l h2.homepage-only::after {
    content: "Reading, Pennsylvania";

    display: block;

    margin: 1.5rem auto 0;

    color: #ffffffe8;

    font-size: clamp(1.1rem, 3vw, 2.5rem);

    font-weight: 1000;

    text-align: center;

    text-shadow:
        2px 2px 0 rgba(0,0,0,0.8),
        4px 4px 0 rgba(0,0,0,0.6),
        8px 8px 15px rgba(0,0,0,0.5);

    transform: none;
}


/* ============================================================
   9. HERO BANNER BUTTON
   ============================================================ */

.hero-button {
    display: inline-block;

    background-color: rgba(255, 174, 0, 0.5);

    color: #ffffff;

    padding: 0.8rem 2.5rem;

    font-size: 1.25rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: 50px;

    transition: all 0.3s ease;

    margin-top: 1rem;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nested-links a.hero-button {
    color: #ffffff;
}

.hero-button:hover {
    background-color: rgba(255, 174, 0, 0.8);

    transform: translateY(-2px);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/* ============================================================
   10. DESKTOP HERO SCROLL ARROW
   ============================================================ */

@media (min-width: 768px) {

    /*
       Move the arrow visually without changing the document
       flow. This prevents the bio section from being pulled
       into the hero.
    */
    .scroll-arrow {
        position: relative !important;

        transform: translateY(-12rem) !important;

        z-index: 20 !important;

        pointer-events: none;
    }

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


/* ============================================================
   11. SCROLL / BIO SECTION
   ============================================================ */

.scroll-section {
    position: relative;

    width: 100vw;

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

    padding: 3rem 0;
}

.sticky-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
}

.bio-layout {
    display: flex;

    flex-direction: column;

    align-items: center;

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    gap: 3rem;
}

.profile-card figure {
    margin: 0 auto;
}

.profile-card figure img {
    width: 260px !important;

    height: 260px !important;

    aspect-ratio: 1 / 1 !important;

    flex-shrink: 0;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 2px solid #ccc;

    padding: 6px;
}

.profile-card h2 {
    font-size: 2rem !important;

    white-space: nowrap;

    margin-top: 0.5rem !important;
}

.bio-text {
    opacity: 1;

    font-size: 1.55rem;

    line-height: 1.7;
}


/*
   Desktop bio layout.

   Align to the top rather than vertically centering. This is
   important when the bio text becomes taller at narrower
   desktop widths.
*/
@media (min-width: 768px) {

    .bio-layout {
        flex-direction: row;

        justify-content: space-between;

        align-items: flex-start;
    }

    .profile-card {
        flex: 0 0 360px;

        text-align: center;
    }

    .bio-text {
        flex: 1;
    }
}


/* ============================================================
   12. SCROLL ANIMATION
   ============================================================ */

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

    .scroll-section {
        height: 300vh;

        padding: 0;
    }

    /*
       Allow the wrapper to grow with the bio instead of forcing
       all desktop layouts into exactly 80vh.

       At normal desktop widths this behaves like the original
       80vh layout. At narrower desktop widths, additional
       wrapped bio lines can increase the wrapper height without
       being covered by the following color section.
    */
    .sticky-wrapper {
        position: sticky;

        top: 6vh;

        min-height: 80vh;

        height: auto;
    }

    .bio-text {
        opacity: 0;
    }

    @media (min-width: 768px) {

        .profile-card {
            animation: centerToLeft linear both;

            animation-timeline: view();

            animation-range: entry 20% exit 80%;
        }

        .bio-text {
            animation: revealBio linear both;

            animation-timeline: view();

            animation-range: entry 20% exit 80%;
        }
    }
}


/* ============================================================
   13. ANIMATION KEYFRAMES
   ============================================================ */

@keyframes centerToLeft {

    0%, 25% {
        transform: translateX(calc(min(45vw, 600px) - 180px));
    }

    70% {
        transform: translateX(0);

        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes revealBio {

    0%, 55% {
        opacity: 0;

        transform: translateX(40px);
    }

    70% {
        opacity: 1;

        transform: translateX(0);
    }

    100% {
        opacity: 0;
    }
}


/* ============================================================
   14. COLORED SECTION
   ============================================================ */

.color-section {
    width: 100vw;

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

    background-color: #1b2a4a;

    background-image: url('../img/color_section_back.png');

    color: #ffffff;

    padding: 3rem 1.5rem;

    position: relative;

    z-index: 2;
}

.color-section-inner {
    max-width: 1000px;

    margin: 0 auto;

    text-align: center;
}

.color-section-inner h2 {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;

    color: #ffffff !important;

    margin-bottom: 1.5rem;
}

.color-section-inner p,
.color-section-inner li {
    font-size: clamp(1rem, 1.8vw, 1.5rem);

    line-height: 1.7;
}

.color-section-inner ul {
    list-style-type: none;

    padding: 0;
}


/* ============================================================
   15. REMOVE DEFAULT BOTTOM GAPS
   ============================================================ */

main,
article,
.nested-copy-line-height {
    padding-bottom: 0 !important;

    margin-bottom: 0 !important;
}

.color-section {
    margin-bottom: 0 !important;
}


/* ============================================================
   16. COLORED SECTION TITLE
   ============================================================ */

.color-section-text-top {
    text-shadow:
        2px 2px 0px rgb(255, 123, 0) !important;

    transform: scale(1.05);

    transition: transform 0.3s ease;
}


/* ============================================================
   17. SERVICE TIMES
   ============================================================ */

.service-time {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.75rem;

    margin-top: 1rem;

    margin-bottom: 1rem;
}


/* ============================================================
   18. FOOTER
   ============================================================ */

footer > div {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;
}

@media (max-width: 600px) {

    footer > div {
        flex-direction: column;

        text-align: center;

        gap: 0.5rem;
    }
}


/* ============================================================
   19. BOUNCING SCROLL ARROW
   ============================================================ */

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.scroll-arrow {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    opacity: 0.5 !important;
}


/*
   The figure owns the bounce animation so it does not conflict
   with the desktop positioning transform on .scroll-arrow.
*/
.scroll-arrow figure {
    animation: bounce 2s infinite;
}

.scroll-arrow figure,
.scroll-arrow img {
    margin-left: auto !important;

    margin-right: auto !important;
}

/* ============================================================
   DESKTOP SCROLL ARROW
   ============================================================ */

/*
   The arrow exists on every page so mobile can use it.

   Desktop behavior:
   - Homepage: visible
   - All other pages: hidden
*/
@media (min-width: 768px) {

    .scroll-arrow {
        display: none !important;
    }

    body.is-home .scroll-arrow {
        display: flex !important;

        position: relative !important;

        transform: translateY(-9.5rem) !important;

        z-index: 20 !important;

        pointer-events: none;
    }

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