/*
 * WorkCampConnect — Forum Getting Started Guide
 * /help/forum-guide/
 * Builds on design-system.css variables.
 */

/* ══════════════════════════════════════════════════════════════
   WRAPPER
   ══════════════════════════════════════════════════════════════ */
.fg-wrap {
    max-width:          780px;
    margin:             0 auto;
    padding:            var(--space-8) var(--space-6) var(--space-12);
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.fg-hero {
    text-align:         center;
    padding:            var(--space-8) 0 var(--space-6);
    border-bottom:      2px solid var(--color-border);
    margin-bottom:      var(--space-8);
}
.fg-hero__title {
    font-size:          28px;
    font-weight:        var(--font-weight-bold);
    color:              var(--color-heading);
    margin:             0 0 var(--space-3);
}
.fg-hero__sub {
    font-size:          var(--font-size-base);
    color:              var(--color-text-muted);
    margin:             0 0 var(--space-5);
    line-height:        var(--line-height-relaxed);
}
.fg-hero__cta {
    display:            inline-block;
    padding:            var(--space-3) var(--space-6);
    background:         var(--color-primary);
    color:              var(--color-text-on-primary);
    border-radius:      var(--radius-base);
    text-decoration:    none;
    font-weight:        var(--font-weight-semibold);
    font-size:          var(--font-size-sm);
}
.fg-hero__cta:visited { color: var(--color-text-on-primary); }
.fg-hero__cta:hover   { opacity: 0.9; text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ══════════════════════════════════════════════════════════════ */
.fg-toc {
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-lg);
    padding:            var(--space-5);
    margin-bottom:      var(--space-8);
}
.fg-toc__heading {
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-semibold);
    text-transform:     uppercase;
    letter-spacing:     0.05em;
    color:              var(--color-text-muted);
    margin:             0 0 var(--space-3);
}
.fg-toc__list {
    margin:             0;
    padding-left:       var(--space-5);
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-2);
}
.fg-toc__list a {
    font-size:          var(--font-size-sm);
    color:              var(--color-heading);
    text-decoration:    none;
}
.fg-toc__list a:visited { color: var(--color-heading); }
.fg-toc__list a:hover   { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════ */
.fg-section {
    display:            flex;
    gap:                var(--space-5);
    padding:            var(--space-6) 0;
    border-bottom:      1px solid var(--color-border);
}
.fg-section--highlight {
    background:         var(--color-accent-light);
    border:             2px solid var(--color-accent);
    border-radius:      var(--radius-lg);
    padding:            var(--space-6);
    margin:             var(--space-4) 0;
}
.fg-section__badge {
    flex-shrink:        0;
    width:              40px;
    height:             40px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         var(--color-primary);
    color:              var(--color-text-on-primary);
    font-weight:        var(--font-weight-bold);
    font-size:          var(--font-size-lg);
    border-radius:      50%;
}
.fg-section__body {
    flex:               1;
    min-width:          0;
}
.fg-section__title {
    font-size:          var(--font-size-lg);
    font-weight:        var(--font-weight-bold);
    color:              var(--color-heading);
    margin:             0 0 var(--space-3);
}
.fg-section__body > p {
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    color:              var(--color-text-muted);
    margin:             0 0 var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   STEPS (numbered)
   ══════════════════════════════════════════════════════════════ */
.fg-steps {
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-3);
    margin-bottom:      var(--space-4);
}
.fg-step {
    display:            flex;
    align-items:        flex-start;
    gap:                var(--space-3);
}
.fg-step__num {
    flex-shrink:        0;
    width:              28px;
    height:             28px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         var(--color-primary-subtle);
    color:              var(--color-heading);
    font-weight:        var(--font-weight-bold);
    font-size:          var(--font-size-sm);
    border-radius:      50%;
}
.fg-step__content {
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    color:              var(--color-text-muted);
}
.fg-step__content p {
    margin:             var(--space-1) 0 0;
}

/* ══════════════════════════════════════════════════════════════
   CALLOUT BOXES
   ══════════════════════════════════════════════════════════════ */
.fg-callout {
    display:            flex;
    align-items:        flex-start;
    gap:                var(--space-3);
    border-radius:      var(--radius-base);
    padding:            var(--space-3) var(--space-4);
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    margin:             var(--space-4) 0;
}
.fg-callout__icon {
    font-size:          1.2rem;
    flex-shrink:        0;
    line-height:        1.4;
}
.fg-callout a             { color: var(--color-heading); text-decoration: underline; }
.fg-callout a:visited     { color: var(--color-heading); }
.fg-callout a:hover       { color: var(--color-heading); }

.fg-callout--tip {
    background:         var(--color-green-light);
    border-left:        4px solid var(--color-green);
    color:              var(--color-text-success);
}
.fg-callout--info {
    background:         var(--color-primary-light);
    border-left:        4px solid var(--color-primary);
    color:              var(--color-text-info);
}

/* ══════════════════════════════════════════════════════════════
   CONCEPT ROW (3-column cards — Section 2)
   ══════════════════════════════════════════════════════════════ */
.fg-concept-row {
    display:            grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                var(--space-3);
    margin-bottom:      var(--space-4);
}
.fg-concept {
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    padding:            var(--space-4);
    text-align:         center;
}
.fg-concept__icon {
    font-size:          1.8rem;
    margin-bottom:      var(--space-2);
}
.fg-concept__title {
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-bold);
    color:              var(--color-heading);
    margin:             0 0 var(--space-2);
}
.fg-concept p {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    margin:             0;
    line-height:        var(--line-height-relaxed);
}

/* ══════════════════════════════════════════════════════════════
   METHOD ROW (A / B cards — Section 4)
   ══════════════════════════════════════════════════════════════ */
.fg-method-row {
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-3);
    margin-bottom:      var(--space-4);
}
.fg-method {
    display:            flex;
    align-items:        flex-start;
    gap:                var(--space-3);
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    padding:            var(--space-4);
}
.fg-method__letter {
    flex-shrink:        0;
    width:              32px;
    height:             32px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         var(--color-primary);
    color:              var(--color-text-on-primary);
    font-weight:        var(--font-weight-bold);
    font-size:          var(--font-size-sm);
    border-radius:      50%;
}
.fg-method__title {
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-bold);
    color:              var(--color-heading);
    margin:             0 0 var(--space-1);
}
.fg-method p {
    font-size:          var(--font-size-sm);
    color:              var(--color-text-muted);
    margin:             0;
    line-height:        var(--line-height-relaxed);
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR GUIDE (Section 5)
   ══════════════════════════════════════════════════════════════ */
.fg-toolbar {
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-2);
    margin-bottom:      var(--space-4);
}
.fg-toolbar__item {
    display:            flex;
    align-items:        flex-start;
    gap:                var(--space-3);
    padding:            var(--space-3);
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
}
.fg-toolbar__key {
    flex-shrink:        0;
    width:              32px;
    height:             32px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         var(--color-surface-raised);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-sm);
    font-size:          16px;
    margin-top:         2px;
}
.fg-toolbar__body {
    flex:               1;
    min-width:          0;
}
.fg-toolbar__label {
    font-size:          var(--font-size-sm);
    line-height:        var(--line-height-relaxed);
    color:              var(--color-text-muted);
    display:            block;
}
.fg-toolbar__preview {
    margin-top:         var(--space-2);
    padding:            var(--space-2) var(--space-3);
    background:         var(--color-surface-raised);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-sm);
    font-size:          var(--font-size-sm);
    color:              var(--color-text);
    line-height:        var(--line-height-relaxed);
}
.fg-toolbar__link-demo {
    color:              var(--color-action);
    text-decoration:    underline;
}
.fg-toolbar__img-demo {
    display:            inline-flex;
    align-items:        center;
    gap:                4px;
    background:         var(--color-green-light);
    border:             1px solid var(--color-green);
    border-radius:      var(--radius-sm);
    padding:            1px 6px;
    font-size:          var(--font-size-xs);
    color:              var(--color-text-success);
}

/* ══════════════════════════════════════════════════════════════
   FEATURE GRID (Section 7)
   ══════════════════════════════════════════════════════════════ */
.fg-feature-grid {
    display:            grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                var(--space-3);
    margin:             var(--space-4) 0;
}
.fg-feature {
    display:            flex;
    gap:                var(--space-3);
    padding:            var(--space-4);
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
}
.fg-feature__icon {
    flex-shrink:        0;
    font-size:          24px;
    line-height:        1;
}
.fg-feature p {
    font-size:          var(--font-size-sm);
    color:              var(--color-text-muted);
    margin:             var(--space-1) 0 0;
    line-height:        var(--line-height-relaxed);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.fg-footer {
    text-align:         center;
    padding:            var(--space-8) 0 var(--space-4);
}
.fg-footer__text {
    font-size:          var(--font-size-lg);
    font-weight:        var(--font-weight-semibold);
    color:              var(--color-heading);
    margin:             0 0 var(--space-4);
}
.fg-footer__buttons {
    display:            flex;
    gap:                var(--space-3);
    justify-content:    center;
    flex-wrap:          wrap;
}
.fg-footer__btn {
    display:            inline-block;
    padding:            var(--space-3) var(--space-6);
    border-radius:      var(--radius-base);
    text-decoration:    none;
    font-weight:        var(--font-weight-semibold);
    font-size:          var(--font-size-sm);
}
.fg-footer__btn:hover { text-decoration: none; }

.fg-footer__btn--primary,
.fg-footer__btn--primary:visited {
    background:         var(--color-primary);
    color:              var(--color-text-on-primary);
}
.fg-footer__btn--primary:hover { opacity: 0.9; }

.fg-footer__btn--secondary,
.fg-footer__btn--secondary:visited {
    background:         transparent;
    color:              var(--color-heading);
    border:             1px solid var(--color-heading);
}
.fg-footer__btn--secondary:hover {
    background:         var(--color-primary-subtle);
}

/* ══════════════════════════════════════════════════════════════
   VISUAL EXAMPLES (throughout all sections)
   ══════════════════════════════════════════════════════════════ */

/* -- Shared example base --------------------------------------- */
.fg-example {
    margin-top:         var(--space-3);
    border-radius:      var(--radius-sm);
    font-size:          var(--font-size-xs);
}
.fg-example__label {
    font-size:          11px;
    font-weight:        var(--font-weight-semibold);
    text-transform:     uppercase;
    letter-spacing:     0.04em;
    color:              var(--color-text-muted);
    margin-bottom:      var(--space-2);
}

/* -- Section 2: concept card mock lists ------------------------ */
.fg-example__mock-list {
    display:            flex;
    flex-direction:     column;
    gap:                4px;
}
.fg-example__mock-item {
    display:            block;
    background:         var(--color-surface-raised);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-sm);
    padding:            3px 8px;
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    text-align:         left;
}
.fg-example__mock-post {
    background:         var(--color-surface-raised);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-sm);
    padding:            6px 8px;
    text-align:         left;
}
.fg-example__mock-author {
    display:            block;
    font-size:          11px;
    font-weight:        var(--font-weight-bold);
    color:              var(--color-heading);
    margin-bottom:      2px;
}
.fg-example__mock-text {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    line-height:        var(--line-height-relaxed);
}

/* -- Section 3: good vs bad title compare ---------------------- */
.fg-example--compare {
    display:            flex;
    gap:                var(--space-3);
    margin-top:         var(--space-3);
}
.fg-example__good,
.fg-example__bad {
    flex:               1;
    padding:            var(--space-3);
    border-radius:      var(--radius-base);
    border:             1px solid;
}
.fg-example__good {
    background:         var(--color-green-light);
    border-color:       var(--color-green);
}
.fg-example__bad {
    background:         var(--color-red-light);
    border-color:       var(--color-red);
}
.fg-example__verdict {
    display:            block;
    font-size:          11px;
    font-weight:        var(--font-weight-bold);
    text-transform:     uppercase;
    letter-spacing:     0.03em;
    margin-bottom:      var(--space-1);
}
.fg-example__verdict--good { color: var(--color-text-success); }
.fg-example__verdict--bad  { color: var(--color-text-danger); }
.fg-example__title-demo {
    display:            block;
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-semibold);
    color:              var(--color-text);
}

/* -- Section 3: mock editor ------------------------------------ */
.fg-example--editor {
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    overflow:           hidden;
    margin-top:         var(--space-3);
}
.fg-example__editor-chrome {
    background:         var(--color-surface-raised);
    border-bottom:      1px solid var(--color-border);
    padding:            6px 10px;
}
.fg-example__editor-toolbar {
    font-size:          var(--font-size-sm);
    color:              var(--color-text-muted);
    letter-spacing:     1px;
}
.fg-example__editor-body {
    padding:            var(--space-3) var(--space-4);
    font-size:          var(--font-size-sm);
    color:              var(--color-text);
    line-height:        var(--line-height-relaxed);
    background:         var(--color-surface-raised);
    min-height:         48px;
}

/* -- Section 4: quote example ---------------------------------- */
.fg-example--quote {
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    padding:            var(--space-3) var(--space-4);
    margin-top:         var(--space-3);
}
.fg-example__quote-block {
    border-left:        3px solid var(--color-border);
    padding:            var(--space-2) var(--space-3);
    margin-bottom:      var(--space-2);
    background:         var(--color-surface-raised);
    border-radius:      0 var(--radius-sm) var(--radius-sm) 0;
}
.fg-example__quote-source {
    font-size:          11px;
    font-weight:        var(--font-weight-bold);
    color:              var(--color-text-muted);
    margin-bottom:      2px;
}
.fg-example__quote-text {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    font-style:         italic;
    line-height:        var(--line-height-relaxed);
}
.fg-example__quote-reply {
    font-size:          var(--font-size-xs);
    color:              var(--color-text);
    line-height:        var(--line-height-relaxed);
}

/* -- Section 6: post action bar -------------------------------- */
.fg-example--post-actions {
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    padding:            var(--space-3) var(--space-4);
    margin-bottom:      var(--space-4);
}
.fg-example__post-bar {
    display:            flex;
    gap:                var(--space-4);
}
.fg-example__post-action {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    cursor:             default;
}
.fg-example__post-action--hl {
    color:              var(--color-heading);
    font-weight:        var(--font-weight-semibold);
    position:           relative;
}
.fg-example__post-action--hl::after {
    content:            '';
    position:           absolute;
    bottom:             -3px;
    left:               0;
    right:              0;
    height:             2px;
    background:         var(--color-heading);
    border-radius:      1px;
}

/* -- Section 7: signature example ------------------------------ */
.fg-example--sig {
    margin-top:         var(--space-2);
}
.fg-example__sig-line {
    height:             1px;
    background:         var(--color-border);
    margin-bottom:      var(--space-1);
    max-width:          80px;
}
.fg-example__sig-text {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    line-height:        var(--line-height-relaxed);
}

/* -- Section 8: alert examples --------------------------------- */
.fg-example--alerts {
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-base);
    padding:            var(--space-3) var(--space-4);
    margin-bottom:      var(--space-4);
}
.fg-example__alert-list {
    display:            flex;
    flex-direction:     column;
    gap:                0;
}
.fg-example__alert {
    display:            flex;
    align-items:        flex-start;
    gap:                var(--space-2);
    padding:            var(--space-2) 0;
    border-bottom:      1px solid var(--color-border);
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    line-height:        var(--line-height-relaxed);
}
.fg-example__alert:last-child {
    border-bottom:      none;
    padding-bottom:     0;
}
.fg-example__alert-icon {
    flex-shrink:        0;
    font-size:          14px;
    line-height:        1.6;
}
.fg-example__alert strong {
    color:              var(--color-heading);
}
.fg-example__alert em {
    color:              var(--color-text);
}
.fg-example__alert-time {
    display:            block;
    font-size:          11px;
    color:              var(--color-text-muted);
    margin-top:         1px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fg-wrap {
        padding:        var(--space-6) var(--space-4) var(--space-10);
    }
    .fg-hero__title {
        font-size:      22px;
    }
    .fg-section {
        flex-direction: column;
        gap:            var(--space-3);
    }
    .fg-section--highlight {
        padding:        var(--space-4);
    }
    .fg-concept-row {
        grid-template-columns: 1fr;
    }
    .fg-feature-grid {
        grid-template-columns: 1fr;
    }
    .fg-example--compare {
        flex-direction: column;
    }
    .fg-footer__buttons {
        flex-direction: column;
        align-items:    center;
    }
    .fg-footer__btn {
        width:          100%;
        max-width:      280px;
        text-align:     center;
    }
}