:root {
    --motion-ease: cubic-bezier(.2, .72, .24, 1);
    --motion-duration: 680ms;
}

html {
    scroll-behavior: smooth;
}

.site-scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    width: 0;
    height: 3px;
    z-index: 10050;
    pointer-events: none;
    background: var(--lime-accent, #92c33e);
    box-shadow: 0 1px 8px rgba(59, 184, 179, .25);
}

/*
 * Reveal-on-scroll. The hidden state below only ever applies while JS is alive
 * to undo it: `motion-ready` is set by site-motion.js, so no-JS readers get the
 * content unstyled-but-visible. site-motion.js additionally reveals anything
 * already on screen if the observer never fires.
 */
.motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready .motion-reveal[data-motion="left"] {
    transform: translate3d(-34px, 0, 0);
}

.motion-ready .motion-reveal[data-motion="right"] {
    transform: translate3d(34px, 0, 0);
}

.motion-ready .motion-reveal[data-motion="scale"] {
    transform: scale(.95);
}

.motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

main .card,
main article,
main [class*="program-card"],
main [class*="service-card"] {
    transition:
        transform .3s var(--motion-ease),
        box-shadow .3s var(--motion-ease),
        border-color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
    main .card:hover,
    main article:hover,
    main [class*="program-card"]:hover,
    main [class*="service-card"]:hover {
        transform: translateY(-5px);
    }

    main img:not(.site-header-logo):not(.hero-brand-leaf) {
        transition: transform .55s var(--motion-ease);
    }

    main a:hover img:not(.site-header-logo),
    main .card:hover img,
    main article:hover img {
        transform: scale(1.025);
    }
}

.navbar {
    transition: box-shadow .3s ease, background-color .3s ease, padding .3s ease;
}

.navbar.site-nav-scrolled {
    box-shadow: 0 12px 30px rgba(21, 50, 43, .1) !important;
}

.scroll-to-top {
    position: fixed;
    right: 29px;
    bottom: 96px;
    z-index: 9997;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: #fff;
    background: var(--primary-color, #3bb7b2);
    box-shadow: 0 12px 28px rgba(59, 184, 179, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s var(--motion-ease),
        background-color .2s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
    color: #0b1b4d;
    background: var(--lime-accent, #92c33e);
    transform: translateY(-3px);
    outline: none;
}

body.chatbot-open .scroll-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .scroll-to-top {
        right: 23px;
        bottom: 86px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .motion-ready .motion-reveal,
    .motion-ready .motion-reveal[data-motion] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    main .card,
    main article,
    main img,
    .navbar,
    .scroll-to-top {
        transition: none !important;
    }
}

/* ==========================================================================
   Global: unified form styling (style.css is not loaded site-wide,
   so the shared form look lives here)
   ========================================================================== */
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3bb7b2;
}

.form-control,
.form-select {
    background-color: #ffffff;
    border: 1px solid rgba(59, 184, 179, 0.16);
    padding: 13px 18px;
    color: #3a2e34;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder { color: #b3a6ac; }

.form-control:focus,
.form-select:focus {
    background-color: #ffffff;
    border-color: #92c33e;
    box-shadow: 0 0 0 4px rgba(146, 195, 62, 0.16);
    color: #3a2e34;
}

textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

/* Brand text utility classes — defined globally so they never fall back
   to the default link blue on pages that don't redefine them. */
.text-pink { color: #92c33e !important; }
.text-classic-blue { color: #3bb7b2 !important; }

/* Section kicker (shared by several home sections; defined globally so it
   survives even when the intro section is not present on the page) */
.nh-kicker {
    display: block;
    margin-bottom: 22px;
    color: var(--lime-accent, #92c33e);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.nh-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 42px;
}

.nh-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(59, 184, 179, 0.2);
    background: #ffffff;
    color: #3bb7b2;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md, 16px);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nh-page-link:hover,
.nh-page-link:focus-visible {
    border-color: #3bb7b2;
    background: #3bb7b2;
    color: #ffffff;
    transform: translateY(-1px);
}

.nh-page-link.is-active {
    border-color: #92c33e;
    background: #92c33e;
    color: #ffffff;
}

.nh-page-link.is-disabled {
    pointer-events: none;
    opacity: 0.38;
}

/* ==========================================================================
   Global radius safety net for public UI surfaces.
   ========================================================================== */
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-top,
.rounded-end,
.rounded-bottom,
.rounded-start {
    border-radius: var(--radius-control, 14px) !important;
}

.rounded-4,
.rounded-5,
.card,
.blog-card,
.blog-card-modern,
.program-card,
.service-card,
.nh-program-card,
.nh-blog-card,
.nh-resource-card,
.nh-focus-card,
.vmv-card,
.career-card,
.help-card,
.booking-card,
.comment-card,
.comment-form-card,
.conversation-card {
    border-radius: var(--radius-card, var(--radius-md, 18px)) !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.rounded-pill {
    border-radius: var(--radius-pill, 999px) !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

main .img-fluid,
main .nh-archive-image,
main .nh-resource-image,
main .nh-program-card-image,
main .nh-program-list-image,
main .gallery-item-card,
main .sanctuary-img-frame,
main .nh-intro-image,
main .nh-continuity-quote {
    border-radius: var(--radius-media, var(--radius-lg, 24px));
}

main .nh-archive-image,
main .nh-resource-image,
main .nh-program-card-image,
main .nh-program-list-image {
    border-radius: var(--radius-card, var(--radius-md, 18px)) var(--radius-card, var(--radius-md, 18px)) 0 0;
}

main .nh-archive-category,
main .nh-resource-category,
main .nh-program-card-category,
main .nh-program-list-category {
    border-radius: var(--radius-sm, 10px);
}

/* ==========================================================================
   Rich content: tables and images authored in CKEditor.
   Scoped to the two content wrappers so it cannot leak into page furniture.
   CKEditor wraps both in <figure>, so style the figure and the raw tag.
   ========================================================================== */
.blog-content figure.table,
.content-area figure.table {
    margin: 28px 0;
    /* A wide table must scroll inside itself — never widen the page. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-content table,
.content-area table {
    width: 100%;
    min-width: 460px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--line-soft, #d9eceb);
    border-radius: var(--radius-card, 16px);
    font-size: 0.94rem;
}

.blog-content table th,
.content-area table th {
    padding: 13px 16px;
    background: var(--primary-color, #3bb7b2);
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    text-align: left;
    letter-spacing: 0.01em;
    border-bottom: 0;
}

.blog-content table td,
.content-area table td {
    padding: 12px 16px;
    color: var(--text-main, #0b1b4d);
    border-top: 1px solid var(--line-soft, #d9eceb);
    vertical-align: top;
    line-height: 1.6;
}

/* CKEditor emits a header row as <th> inside <tbody> when there is no <thead>. */
.blog-content table tbody tr:first-child td,
.content-area table tbody tr:first-child td { border-top: 0; }

.blog-content table tbody tr:nth-child(even),
.content-area table tbody tr:nth-child(even) { background: #f7fbfb; }

.blog-content table tbody tr:hover,
.content-area table tbody tr:hover { background: rgba(59, 184, 179, 0.08); }

.blog-content table caption,
.content-area table caption {
    caption-side: bottom;
    padding-top: 10px;
    color: var(--muted-blue, #7180ad);
    font-size: 0.8rem;
    text-align: left;
}

/* Content images */
.blog-content figure.image,
.content-area figure.image {
    margin: 28px 0;
    max-width: 100%;
}

.blog-content figure.image img,
.content-area figure.image img,
.blog-content > img,
.content-area > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card, 16px);
}

.blog-content figure.image figcaption,
.content-area figure.image figcaption {
    padding-top: 9px;
    color: var(--muted-blue, #7180ad);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

/* CKEditor's side/inline styles need a desktop float to mean anything. */
@media (min-width: 768px) {
    .blog-content figure.image-style-side,
    .content-area figure.image-style-side {
        float: right;
        max-width: 48%;
        margin: 6px 0 22px 26px;
    }
}

.blog-content figure.image-style-block,
.content-area figure.image-style-block { margin-right: auto; margin-left: auto; }

@media (max-width: 575.98px) {
    .blog-content table,
    .content-area table { font-size: 0.86rem; }

    .blog-content table th,
    .content-area table th,
    .blog-content table td,
    .content-area table td { padding: 10px 12px; }
}


/* A table pasted without CKEditor's <figure class="table"> wrapper still must
   not widen the page, so the table itself becomes its own scroll container. */
.blog-content > table,
.content-area > table,
.blog-content > div > table,
.content-area > div > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Belt and braces: nothing inside a content area may push the page wider. */
.blog-content,
.content-area {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.blog-content img,
.content-area img {
    max-width: 100%;
    height: auto;
}

.blog-content pre,
.content-area pre {
    max-width: 100%;
    overflow-x: auto;
}