/* ================================================
   Group Questions
   Cherokee Hills Christian Church
   ================================================ */

:root {
    --gq-accent:      #01aeef;
    --gq-accent-dark: #0068A6;
    --gq-text:        #1a1a1a;
    --gq-text-muted:  #555;
    --gq-border:      #e0e0e0;
    --gq-bg-light:    #f7f8fa;
    --gq-radius:      8px;
    --gq-radius-lg:   12px;
    --gq-shadow-hover: 0 6px 24px rgba(0,0,0,0.14);
}

/* ── Wrappers ── */

.gq-page {
    width:      100%;
    padding:    2rem 5%;
    box-sizing: border-box;
}

.gq-wrap {
    max-width: 780px;
    margin:    0 auto;
}

.gq-empty {
    padding:    2rem 1rem;
    text-align: center;
    color:      var(--gq-text-muted);
    font-size:  1.05rem;
}

/* ── Single question set ── */

.gq-header {
    margin-bottom:  1.5rem;
    padding-bottom: 1.25rem;
    border-bottom:  2px solid var(--gq-border);
}

.gq-category span,
.gq-card-category span {
    display:        inline-block;
    background:     var(--gq-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin:         0 0.3rem 0.5rem 0;
}

.gq-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--gq-text);
    line-height: 1.2;
    margin:      0 0 0.4rem 0;
}

.gq-meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.35rem 0.5rem;
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--gq-text);
    margin:      0;
}

.gq-meta-sep {
    color:       var(--gq-accent);
    font-weight: 700;
}

.gq-leader {
    color:       var(--gq-text-muted);
    font-weight: 500;
}

/* ── Question content (post editor output) ── */

.gq-content {
    font-size:   16px;
    line-height: 1.75;
    color:       var(--gq-text);
}

.gq-content p {
    margin: 0 0 1.1rem 0;
}

.gq-content h2,
.gq-content h3,
.gq-content h4 {
    margin:      1.75rem 0 0.6rem 0;
    color:       var(--gq-accent-dark);
    line-height: 1.3;
}

.gq-content h2 { font-size: 1.35rem; font-weight: 700; }
.gq-content h3 { font-size: 1.15rem; font-weight: 700; }
.gq-content h4 { font-size: 1rem;    font-weight: 700; }

/* Numbered questions — the main event */
.gq-content ol {
    counter-reset: gq-counter;
    list-style:    none;
    padding-left:  0;
    margin:        0 0 1.5rem 0;
}

.gq-content ol > li {
    counter-increment: gq-counter;
    position:          relative;
    padding:           0.85rem 1rem 0.85rem 3.25rem;
    margin-bottom:     0.6rem;
    background:        var(--gq-bg-light);
    border-left:       3px solid var(--gq-accent);
    border-radius:     0 var(--gq-radius) var(--gq-radius) 0;
    line-height:       1.6;
}

.gq-content ol > li::before {
    content:         counter(gq-counter);
    position:        absolute;
    left:            0.85rem;
    top:             0.85rem;
    width:           1.65rem;
    height:          1.65rem;
    background:      var(--gq-accent-dark);
    color:           #fff;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.8rem;
    font-weight:     700;
    line-height:     1;
}

/* Nested lists stay simple */
.gq-content ol ol,
.gq-content ol ul {
    counter-reset: none;
    list-style:    disc;
    padding-left:  1.4rem;
    margin:        0.6rem 0 0 0;
}

.gq-content ol ol > li,
.gq-content ol ul > li {
    counter-increment: none;
    background:        transparent;
    border-left:       none;
    padding:           0.15rem 0;
    margin-bottom:     0.25rem;
}

.gq-content ol ol > li::before,
.gq-content ol ul > li::before {
    content: none;
}

/* Unordered lists at top level */
.gq-content > ul {
    padding-left: 1.4rem;
    margin:       0 0 1.25rem 0;
}

.gq-content > ul > li {
    margin-bottom: 0.4rem;
    line-height:   1.6;
}

.gq-content blockquote {
    margin:      1.25rem 0;
    padding:     0.85rem 1.25rem;
    border-left: 4px solid var(--gq-accent-dark);
    background:  var(--gq-bg-light);
    font-style:  italic;
    color:       var(--gq-text-muted);
}

.gq-content blockquote p:last-child { margin-bottom: 0; }

/* ── Buttons ── */

.gq-btn {
    display:         inline-block;
    padding:         0.5rem 1.25rem;
    border-radius:   var(--gq-radius);
    font-weight:     700;
    font-size:       0.85rem;
    text-decoration: none !important;
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s;
}

.gq-btn--outline {
    background: transparent;
    color:      var(--gq-accent-dark) !important;
    border:     2px solid var(--gq-accent-dark);
}

.gq-btn--outline:hover {
    background: var(--gq-accent-dark);
    color:      #fff !important;
}

.gq-archive-link {
    margin-top: 2rem;
}

/* ── Prev / next nav ── */

.gq-nav {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-top:    2.5rem;
    padding-top:   1.5rem;
    border-top:    1px solid var(--gq-border);
}

.gq-nav-side {
    flex:      1 1 0;
    min-width: 0;
}

.gq-nav-side--right {
    text-align: right;
}

.gq-nav-link {
    display:         block;
    text-decoration: none !important;
    color:           inherit;
}

.gq-nav-link * { text-decoration: none !important; }

.gq-nav-label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--gq-accent-dark);
    margin-bottom:  0.15rem;
}

.gq-nav-title {
    display:       block;
    font-size:     0.9rem;
    color:         var(--gq-text);
    line-height:   1.3;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.gq-nav-link:hover .gq-nav-title {
    color: var(--gq-accent-dark);
}

.gq-nav-all {
    flex-shrink: 0;
}

/* ── Archive page ── */

.gq-archive-page {
    width:      100%;
    padding:    2rem 5%;
    box-sizing: border-box;
}

.gq-archive-header {
    margin-bottom: 2rem;
}

.gq-archive-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--gq-text);
    margin:      0 0 0.35rem 0;
}

.gq-archive-intro {
    font-size: 1rem;
    color:     var(--gq-text-muted);
    margin:    0;
}

.gq-year-group {
    margin-bottom: 2.5rem;
}

.gq-year-heading {
    font-size:      1.1rem;
    font-weight:    700;
    color:          var(--gq-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:         0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom:  2px solid var(--gq-accent);
}

/* ── Cards ── */

.gq-list {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.25rem;
}

.gq-card {
    background:    #f4f4f4;
    border-radius: var(--gq-radius-lg);
    overflow:      hidden;
    transition:    box-shadow 0.2s, transform 0.2s;
}

.gq-card:hover {
    box-shadow: var(--gq-shadow-hover);
    transform:  translateY(-2px);
}

.gq-card-link {
    display:         block;
    padding:         1.25rem 1.4rem;
    text-decoration: none !important;
    color:           inherit;
}

.gq-card-link * { text-decoration: none !important; }

.gq-card-date {
    display:     block;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--gq-accent-dark);
    margin-bottom: 0.3rem;
}

.gq-card-title {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--gq-text);
    line-height: 1.25;
    margin:      0 0 0.45rem 0;
}

.gq-card:hover .gq-card-title {
    color: var(--gq-accent-dark);
}

.gq-card-leader {
    font-size: 0.85rem;
    color:     var(--gq-text-muted);
    margin:    0 0 0.4rem 0;
}

.gq-card-excerpt {
    font-size:          0.92rem;
    color:              var(--gq-text);
    line-height:        1.55;
    margin:             0;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Responsive ── */

@media (max-width: 700px) {
    .gq-page,
    .gq-archive-page {
        padding: 1.5rem 1rem;
    }

    .gq-title { font-size: 1.5rem; }

    .gq-content ol > li {
        padding: 0.75rem 0.85rem 0.75rem 2.9rem;
    }

    .gq-nav {
        flex-direction: column;
        align-items:    stretch;
        gap:            1rem;
    }

    .gq-nav-side--right { text-align: left; }

    .gq-nav-title { white-space: normal; }

    .gq-list { grid-template-columns: 1fr; }
}