/* ============================================
   NEXT STEPS — sticky bottom bar + mentor modal
   Homepage only. Tokens come from theme.css :root.
   ============================================ */

/* --------------------------------------------
   STICKY BAR
   Its home is in the flow directly under the outcome cards. `sticky` pins it to
   the bottom of the viewport while that home is still below the fold, then lets
   it settle into place as the reader scrolls down to it — no layout shift,
   because it occupies its own space the whole time.

   z-index 120 is scoped to .content-body's stacking context (z-index 4), so it
   clears its siblings but still sits under the fixed nav and donate widget.
   -------------------------------------------- */
/* Doubles as the gap above the bar and as the measuring point for its home —
   see next-steps.js. */
.next-steps-home {
    height: 8px;
}

.next-steps-bar {
    position: sticky;
    bottom: 16px;
    z-index: 120;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(44, 35, 33, 0.16);
    transform: translateY(calc(100% + 32px));
    visibility: hidden;
    transition: transform 0.32s ease, visibility 0s linear 0.32s, box-shadow 0.32s ease;
}

.next-steps-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.32s ease, visibility 0s linear 0s, box-shadow 0.32s ease;
}

/* The section-labels dev tool forces `position: relative` on everything carrying
   a data-section-label (theme.css:1272) and outranks the rule above, which would
   silently kill the sticky behaviour whenever ?labels is on. */
body.show-section-labels .next-steps-bar {
    position: sticky;
}

/* Settled into the page: it is a section now, not a floating panel, so it drops
   the lift and never animates. */
.next-steps-bar.is-docked {
    box-shadow: none;
    transition: none;
}

.next-steps-bar__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* --------------------------------------------
   CARDS
   -------------------------------------------- */
.next-steps-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 14px 42px 14px 18px;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.next-steps-card:hover,
.next-steps-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(44, 35, 33, 0.10);
    outline: none;
}

.next-steps-card:focus-visible {
    border-color: var(--primary);
}

.next-steps-card--action {
    border-left-color: var(--secondary);
}

.next-steps-card__label {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 4px;
}

.next-steps-card__desc {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.next-steps-card__go {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--primary);
    transition: transform 0.25s ease;
}

.next-steps-card--action .next-steps-card__go {
    color: var(--secondary);
}

.next-steps-card:hover .next-steps-card__go {
    transform: translateY(-50%) translateX(3px);
}

/* --------------------------------------------
   MENTOR MODAL — native <dialog>
   -------------------------------------------- */
.mentor-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 620px;
    width: calc(100% - 32px);
    max-height: 90vh;
    padding: 0;
    border: none;
    border-radius: 24px;
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 32px 80px rgba(44, 35, 33, 0.28);
    overflow: hidden;
}

.mentor-modal[open] {
    display: flex;
    flex-direction: column;
}

.mentor-modal::backdrop {
    background: rgba(44, 35, 33, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mentor-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mentor-modal__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    padding-right: 24px;
    line-height: 1.2;
}

.mentor-modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
}

.mentor-modal__close:hover,
.mentor-modal__close:focus-visible {
    background: var(--border);
    outline: none;
}

.mentor-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 28px 32px;
    flex: 1 1 auto;
}

/* --------------------------------------------
   BOOKING FORM
   No form-control styles exist in theme.css — these are
   the theme's first, so they define the house style.
   -------------------------------------------- */
.mentor-form__intro {
    font-family: 'Nunito', sans-serif;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: none;
    margin: 0 0 22px;
}

.mentor-form__fieldset {
    border: none;
    padding: 0;
    margin: 0 0 22px;
}

.mentor-form__legend,
.mentor-field__label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    padding: 0;
}

.mentor-form__legend {
    margin-bottom: 12px;
}

.mentor-slots {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mentor-slot-day__label {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 8px;
}

.mentor-slot-day__times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The radio itself is visually hidden but stays focusable and in the
   accessibility tree; the label is the visible control. */
.mentor-slot__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mentor-slot {
    display: inline-block;
    padding: 8px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mentor-slot:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mentor-slot__input:checked + .mentor-slot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.mentor-slot__input:focus-visible + .mentor-slot {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.mentor-form__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.mentor-field {
    margin: 0;
}

/* Name spans the full width; phone and email share the row below. */
.mentor-field:first-child {
    grid-column: 1 / -1;
}

.mentor-field__label {
    display: block;
    margin-bottom: 6px;
}

.mentor-field__input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mentor-field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(181, 100, 106, 0.15);
}

.mentor-field__input.is-invalid,
.mentor-slots.is-invalid .mentor-slot {
    border-color: var(--primary-dk, #9A5258);
}

.mentor-form__error {
    font-family: 'Nunito', sans-serif;
    font-size: 0.86rem;
    color: var(--primary-dk, #9A5258);
    background: rgba(181, 100, 106, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 18px 0 0;
    max-width: none;
}

.mentor-form__actions {
    margin-top: 22px;
}

.mentor-form__actions .btn {
    width: 100%;
}

/* --------------------------------------------
   CONFIRMATION PANEL
   -------------------------------------------- */
.mentor-confirm__eyebrow {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 10px;
}

.mentor-confirm__title {
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    margin: 0 0 14px;
}

.mentor-confirm__title:focus {
    outline: none;
}

.mentor-confirm__slot {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    max-width: none;
    margin: 0 0 10px;
}

.mentor-confirm__text {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: none;
    margin: 0;
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */
@media (max-width: 900px) {
    .next-steps-card__desc {
        font-size: 0.78rem;
    }
}

/* Below this width the cards become a swipeable row that keeps
   its descriptions, with the next card peeking at the edge. */
@media (max-width: 768px) {
    .next-steps-bar {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 12px;
        border-radius: 16px;
    }

    .next-steps-bar__row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px;
    }

    .next-steps-bar__row::-webkit-scrollbar {
        display: none;
    }

    /* The bar is inset within .content-body now, so size the cards against the
       container rather than the viewport; the next card still peeks. */
    .next-steps-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }

    /* Below this width the donate widget also anchors to bottom-left
       (donate-widget.css:139-147), landing its tab on top of the bar while it
       floats. Lift the tab clear for as long as that lasts — once the bar docks
       into the page it scrolls away on its own and the tab can drop back. The
       widget's panel is fixed to the viewport independently, so it still covers
       the bar when opened. */
    .donate-widget {
        transition: bottom 0.32s ease;
    }

    html.next-steps-floating .donate-widget {
        bottom: var(--cj-next-steps-height, 0px);
    }

    /* Lift on hover shifts a snapped card out of alignment on touch. */
    .next-steps-card:hover,
    .next-steps-card:focus-visible {
        transform: none;
    }

    .mentor-modal {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .mentor-modal__header {
        padding: 16px 20px;
    }

    .mentor-modal__title {
        font-size: 1.35rem;
    }

    .mentor-modal__body {
        padding: 20px 20px 32px;
    }

    .mentor-form__fields {
        grid-template-columns: 1fr;
    }

    .mentor-field:first-child {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .next-steps-card {
        flex-basis: 90%;
        padding: 12px 38px 12px 16px;
    }

    .next-steps-card__label {
        font-size: 1.1rem;
    }

    .mentor-confirm__title {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .next-steps-bar,
    .next-steps-bar.is-visible,
    .next-steps-card,
    .next-steps-card__go {
        transition: none;
    }
}