/* ============================================
   JOY IN CONNECTION — single Connection Idea (cj_connection)

   Two halves:
   1. The page: hero eyebrow, toolbar, download card, "More …" footer.
   2. The body and its block styles (Lead, Tip, Takeaway, Supplies, Steps,
      Say this, Playlist, Question cards, Affirmations). These are also loaded
      into the editor canvas for this post type, so every block-style rule is
      scoped with :where(.connection-body, .editor-styles-wrapper) — zero
      specificity for the scope, so the rules weigh the same in both places.

   The global reset in theme.css zeroes every margin and padding, so the body
   sets its own rhythm for plain paragraphs, headings and lists.
   ============================================ */

.connection-page,
.editor-styles-wrapper {
    --cn-rose:      var(--primary, #B5646A);
    --cn-rose-dk:   var(--primary-dk, #9A5258);
    --cn-rose-tint: #F5E3E4;
    --cn-sage:      var(--secondary, #8FA68A);
    --cn-sage-dk:   var(--secondary-dk, #7A9175);
    --cn-sage-tint: #EEF3EC;
    --cn-cream:     #FCF5E9;
    --cn-border:    var(--border, #E8E0D8);
    --cn-muted:     var(--muted, #8C7E76);
    --cn-text:      var(--text, #2C2321);
}

/* Editor canvas only — this file reaches the canvas just for Connection Ideas
   — so the block styles are seen against the site's own type. */
.editor-styles-wrapper {
    font-family: 'Nunito', sans-serif;
    color: var(--cn-text);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ─── Hero ─── */

/* Taller-than-skit content (eyebrow + title + tagline): let the hero grow
   instead of fixing its height, so the title can never slide under the
   content card that overlaps the bottom of the hero. */
.connection-hero {
    height: auto;
    min-height: 560px;
}

.connection-hero .hero-content {
    max-width: 820px;
}

.connection-hero .hero-content h1 {
    font-size: 3.4rem;
    margin-bottom: 12px;
}

.connection-hero .hero-subtitle {
    margin-bottom: 0;
}

.connection-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 16px 6px 12px;
    border-radius: 999px;
    background: rgba(253, 248, 240, 0.16);
    border: 1px solid rgba(253, 248, 240, 0.35);
    color: var(--bg, #FDF8F0);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.connection-eyebrow svg {
    flex-shrink: 0;
}

/* ─── Toolbar ─── */

.connection-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 2rem;
}

.connection-back {
    font-size: 0.95rem;
    color: var(--cn-rose);
    transition: color 0.2s;
}

.connection-back:hover,
.connection-back:focus-visible {
    color: var(--cn-text);
    text-decoration: underline;
}

.connection-print-btn {
    background: none;
    border: 1px solid #e8e4df;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--cn-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.connection-print-btn:hover {
    background: #f7f5f2;
    border-color: var(--cn-rose);
}

/* Screen never shows it; print.css does. */
.connection-print-title {
    display: none;
}

/* ─── Download & print card (files lifted out of the body) ─── */

.connection-downloads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px 36px;
    align-items: center;
    max-width: 880px;
    margin: 0 auto 3rem;
    padding: 28px 32px;
    background: var(--cn-cream);
    border: 1px solid var(--cn-border);
    border-top: 3px solid var(--cn-rose);
    border-radius: 14px;
}

.connection-downloads__intro h2 {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.connection-downloads__intro p {
    color: var(--cn-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.connection-downloads__list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.connection-download {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--cn-border);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.connection-download:hover,
.connection-download:focus-visible {
    border-color: var(--cn-rose);
    box-shadow: 0 4px 16px rgba(44, 35, 33, 0.08);
}

.connection-download__badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 54px;
    border-radius: 6px 14px 6px 6px;
    background: var(--cn-rose);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.connection-download__badge--word {
    background: var(--cn-sage-dk);
}

.connection-download__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.connection-download__label {
    font-weight: 700;
    line-height: 1.35;
    color: var(--cn-text);
}

.connection-download__meta {
    font-size: 0.8rem;
    color: var(--cn-muted);
}

.connection-download__action {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--cn-rose);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.connection-download:hover .connection-download__action {
    background: var(--cn-rose-dk);
}

/* ============================================
   THE BODY — plain blocks
   ============================================ */

.connection-body {
    max-width: 740px;
    margin: 0 auto;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--cn-text);
}

.connection-body > p,
.connection-body .wp-block-column > p,
.connection-body .wp-block-group > p {
    margin: 0 0 1.1em;
}

.connection-body h2.wp-block-heading {
    font-size: 2rem;
    font-weight: 600;
    margin: 2.8rem 0 1rem;
    color: var(--cn-text);
}

/* A short rose rule over each section heading — the page's "chapter" mark. */
.connection-body h2.wp-block-heading::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-bottom: 0.7rem;
    background: var(--cn-rose);
    border-radius: 2px;
}

.connection-body h3.wp-block-heading {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    color: var(--cn-rose-dk);
}

.connection-body > *:first-child,
.connection-body > .connection-print-title + * {
    margin-top: 0;
}

.connection-body ul.wp-block-list:not([class*="is-style-"]),
.connection-body ol.wp-block-list:not([class*="is-style-"]) {
    margin: 0 0 1.25em;
    padding-left: 1.5rem;
}

.connection-body ul.wp-block-list:not([class*="is-style-"]) { list-style: disc; }
.connection-body ol.wp-block-list:not([class*="is-style-"]) { list-style: decimal; }

.connection-body li {
    margin-bottom: 0.35em;
}

.connection-body li::marker {
    color: var(--cn-rose);
}

.connection-body a {
    color: var(--cn-rose-dk);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.connection-body a:hover {
    color: var(--cn-text);
}

.connection-body hr.wp-block-separator {
    width: 80px;
    margin: 3rem auto;
    border: none;
    border-top: 2px dotted var(--cn-rose);
    opacity: 0.6;
}

/* Two-column "For visitors / For activity directors" style splits. */
.connection-body .wp-block-columns {
    display: flex;
    gap: 20px;
    margin: 0 0 1.5rem;
}

.connection-body .wp-block-column {
    flex: 1;
    min-width: 0;
    padding: 24px 24px 12px;
    background: var(--cn-cream);
    border-radius: 14px;
}

.connection-body .wp-block-column > h3.wp-block-heading {
    margin-top: 0;
}

/* ============================================
   BLOCK STYLES
   ============================================ */

/* ─── Lead — the opening paragraph ─── */

:where(.connection-body, .editor-styles-wrapper) p.is-style-lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cn-text);
    margin-bottom: 1.4rem;
}

:where(.connection-body, .editor-styles-wrapper) p.is-style-lead strong {
    font-weight: 700;
}

/* ─── Tip — a sage note with a lightbulb ─── */

:where(.connection-body, .editor-styles-wrapper) p.is-style-tip {
    position: relative;
    margin: 1.5rem 0;
    padding: 16px 20px 16px 58px;
    background: var(--cn-sage-tint);
    border-left: 4px solid var(--cn-sage);
    border-radius: 4px 12px 12px 4px;
    line-height: 1.65;
}

:where(.connection-body, .editor-styles-wrapper) p.is-style-tip::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 17px;
    width: 22px;
    height: 22px;
    background: var(--cn-sage-dk);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ─── Takeaway — the closing line ─── */

:where(.connection-body, .editor-styles-wrapper) p.is-style-takeaway {
    max-width: 580px;
    margin: 3rem auto 1rem;
    padding-top: 1.6rem;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.65rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cn-rose-dk);
    background: linear-gradient(var(--cn-rose), var(--cn-rose)) top center / 56px 2px no-repeat;
}

:where(.connection-body, .editor-styles-wrapper) p.is-style-takeaway strong {
    font-weight: 600;
}

/* Two takeaways in a row (a quote, then a closing line) read as one block. */
:where(.connection-body, .editor-styles-wrapper) p.is-style-takeaway + p.is-style-takeaway {
    margin-top: 0;
    padding-top: 0;
    background: none;
}

/* ─── Supplies — check-marked chips ─── */

:where(.connection-body, .editor-styles-wrapper) ul.is-style-supplies {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0 0 1.5rem;
    padding: 0;
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-supplies li {
    position: relative;
    margin: 0;
    padding: 12px 14px 12px 46px;
    background: var(--cn-cream);
    border: 1px solid var(--cn-border);
    border-radius: 10px;
    line-height: 1.45;
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-supplies li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cn-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ─── Steps — numbered circles ─── */

/* counter(list-item) is the list's own numbering, so a Steps list that the
   editor starts at 5 still starts at 5. */
:where(.connection-body, .editor-styles-wrapper) ol.is-style-steps {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

:where(.connection-body, .editor-styles-wrapper) ol.is-style-steps li {
    position: relative;
    margin: 0;
    padding: 0 0 18px 56px;
    min-height: 40px;
    line-height: 1.6;
}

:where(.connection-body, .editor-styles-wrapper) ol.is-style-steps li::before {
    content: counter(list-item);
    position: absolute;
    left: 0;
    top: -3px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cn-rose);
    color: #fff;
    /* Nunito, not Cormorant: Cormorant's old-style 1 reads as an i. */
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

/* The thread joining one step to the next. */
:where(.connection-body, .editor-styles-wrapper) ol.is-style-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 4px;
    width: 2px;
    background: var(--cn-rose);
    opacity: 0.3;
}

/* ─── Say this — speech bubbles ─── */

:where(.connection-body, .editor-styles-wrapper) ul.is-style-say-this {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 1.75rem;
    padding: 0;
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-say-this li {
    margin: 0;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid var(--cn-rose-tint);
    border-radius: 20px 20px 20px 4px;
    box-shadow: 0 2px 10px rgba(181, 100, 106, 0.08);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cn-rose-dk);
}

/* ─── Playlist — song rows ─── */

:where(.connection-body, .editor-styles-wrapper) ul.is-style-playlist {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    border-top: 1px solid var(--cn-border);
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-playlist li {
    position: relative;
    margin: 0;
    padding: 12px 8px 12px 50px;
    border-bottom: 1px solid var(--cn-border);
    line-height: 1.5;
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-playlist li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 11px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cn-rose-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A5258' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* A movement idea after the song, e.g. "Bring balloons to pat back and forth". */
:where(.connection-body, .editor-styles-wrapper) ul.is-style-playlist li em {
    display: block;
    font-size: 0.88rem;
    color: var(--cn-muted);
}

/* ─── Question cards ─── */

:where(.connection-body, .editor-styles-wrapper) ol.is-style-questions {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 1.75rem;
    padding: 0;
}

:where(.connection-body, .editor-styles-wrapper) ol.is-style-questions li {
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 58px;
    background: var(--cn-cream);
    border-radius: 12px;
    line-height: 1.5;
}

/* counter(list-item) honours the list's start number, so the numbering runs on
   from one group of questions to the next. */
:where(.connection-body, .editor-styles-wrapper) ol.is-style-questions li::before {
    content: counter(list-item);
    position: absolute;
    left: 16px;
    top: 16px;
    min-width: 28px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--cn-rose);
}

/* ─── Affirmations — one card per "I am …" statement ─── */

:where(.connection-body, .editor-styles-wrapper) ul.is-style-affirmations {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin: 0 0 1.75rem;
    padding: 0;
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-affirmations li {
    margin: 0;
    padding: 16px 18px 14px;
    background: #fff;
    border: 1px solid var(--cn-border);
    border-top: 3px solid var(--cn-rose);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cn-muted);
}

:where(.connection-body, .editor-styles-wrapper) ul.is-style-affirmations li strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cn-text);
}

/* The verse reference — never split "1 John" from "4:19". */
:where(.connection-body, .editor-styles-wrapper) ul.is-style-affirmations li em {
    color: var(--cn-rose-dk);
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================
   MORE … (foot of the page)
   ============================================ */

.connection-more {
    max-width: 880px;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cn-border);
    text-align: center;
}

.connection-more__title {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.connection-more__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 2rem;
    text-align: left;
}

.connection-more__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 16px 18px;
    background: var(--cn-cream);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}

.connection-more__item:hover,
.connection-more__item:focus-visible {
    border-color: var(--cn-rose);
    background: #fff;
}

.connection-more__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cn-rose-tint);
    color: var(--cn-rose-dk);
}

.connection-more__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.connection-more__name {
    font-weight: 700;
    line-height: 1.35;
}

.connection-more__tagline {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--cn-muted);
}

.connection-more__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--cn-rose);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.connection-more__all:hover,
.connection-more__all:focus-visible {
    background: var(--cn-rose-dk);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .connection-hero .hero-content h1 {
        font-size: 2.6rem;
    }

    .connection-downloads {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
}

@media (max-width: 768px) {
    .connection-hero .hero-content h1 {
        font-size: 2.1rem;
    }

    .connection-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }

    .connection-body {
        font-size: 1rem;
    }

    .connection-body h2.wp-block-heading {
        font-size: 1.7rem;
    }

    .connection-body .wp-block-columns {
        flex-direction: column;
    }

    :where(.connection-body, .editor-styles-wrapper) p.is-style-lead {
        font-size: 1.35rem;
    }

    :where(.connection-body, .editor-styles-wrapper) ol.is-style-questions {
        grid-template-columns: 1fr;
    }

    :where(.connection-body, .editor-styles-wrapper) p.is-style-takeaway {
        font-size: 1.4rem;
    }

    .connection-download {
        flex-wrap: wrap;
    }

    .connection-download__action {
        display: none;
    }
}

/* Print rules live in print.css (enqueued as media="print"), not here. */