/* =========================================================================
   Guide page — templates/page-guide.php
   Long-form educational template. Mobile first (375px), single 768px
   desktop breakpoint. All tokens from design-system.css.

   Used by the three guide pages linked from homepage Section 7:
     /how-it-works-for-wrestlers/
     /how-it-works-for-coaches/
     /wrestling-recruiting-timeline/

   Three section blocks: hero (breadcrumb + H1), content body
   (the_content output), and a standardised closing CTA. The
   .wf-guide-content scope rules style stock WP block-editor markup
   so editors don't have to add wrapper classes.
   ========================================================================= */


/* =========================================================================
   SECTION 1 — Guide hero (breadcrumb + H1)
   ========================================================================= */

.wf-guide-hero {
    background:    var(--color-bg);
    padding-block: var(--space-12) var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.wf-guide-hero__crumbs {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-4);
}

.wf-guide-hero__crumb-link {
    color:           var(--color-text-muted);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.wf-guide-hero__crumb-link:hover {
    color: var(--color-primary);
}

.wf-guide-hero__crumb-sep {
    color: var(--color-primary);
    /* The separator is what carries the brand color in the breadcrumb;
       keeps the visual hierarchy quiet until the eye reaches the H1. */
}

.wf-guide-hero__crumb-current {
    color: var(--color-text);
}

.wf-guide-hero__headline {
    font-family:    var(--font-heading);
    font-size:      var(--text-4xl);
    font-weight:    800;
    color:          var(--color-text);
    line-height:    1.1;
    letter-spacing: 0.01em;
    margin: 0;
    max-width: 28ch;
}

@media (min-width: 768px) {
    .wf-guide-hero            { padding-block: var(--space-16) var(--space-12); }
    .wf-guide-hero__headline  { font-size: var(--text-6xl); }
}


/* =========================================================================
   SECTION 2 — Guide content (the_content output)

   720px reading column, generous line-height, DM Sans body. All
   heading + paragraph + list styles are scoped to .wf-guide-content
   so editorial copy can use stock WP block-editor markup (paragraphs,
   <h2>, <h3>, <ul>, <ol>, <a>, <strong>, <em>, <blockquote>, <hr>)
   without needing wrapper classes.
   ========================================================================= */

.wf-guide-content {
    background:    var(--color-bg);
    padding-block: var(--space-12) var(--space-16);
}

.wf-guide-content__inner {
    max-width:     720px;
    margin-inline: auto;
    padding-inline: var(--space-6);

    font-family: var(--font-body);
    font-size:   var(--text-base);
    color:       var(--color-text);
    line-height: 1.7;
    text-align:  left;
}

/* Paragraphs — wpautop wraps prose in <p>. Reset top margin so
   adjacent headings sit close to the paragraph above. */
.wf-guide-content__inner > p {
    margin: 0 0 var(--space-5);
}

.wf-guide-content__inner > p:last-child {
    margin-bottom: 0;
}

/* In-content headings — keep the brand display face but smaller than
   the hero so reader scans the body, not the chapter title. */
.wf-guide-content__inner > h2 {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    700;
    color:          var(--color-text);
    line-height:    1.15;
    letter-spacing: 0.01em;
    margin: var(--space-10) 0 var(--space-4);
}

.wf-guide-content__inner > h2:first-child {
    margin-top: 0;
}

.wf-guide-content__inner > h3 {
    font-family:    var(--font-heading);
    font-size:      var(--text-xl);
    font-weight:    700;
    color:          var(--color-text);
    line-height:    1.2;
    margin: var(--space-8) 0 var(--space-3);
}

/* Lists — comfortable indent + spacing between items. */
.wf-guide-content__inner > ul,
.wf-guide-content__inner > ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
}

.wf-guide-content__inner > ul li,
.wf-guide-content__inner > ol li {
    margin-bottom: var(--space-2);
}

.wf-guide-content__inner > ul li::marker {
    color: var(--color-primary);
}

.wf-guide-content__inner > ol li::marker {
    color:       var(--color-primary);
    font-weight: 700;
}

/* Links — teal underline, hover darkens via filter. */
.wf-guide-content__inner a {
    color:           var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      filter var(--transition-fast);
}

.wf-guide-content__inner a:hover {
    filter: brightness(1.15);
}

/* Inline emphasis */
.wf-guide-content__inner strong { color: var(--color-text); font-weight: 700; }
.wf-guide-content__inner em     { color: var(--color-text); font-style: italic; }

/* Blockquotes — pull-quote treatment for editor-flagged passages. */
.wf-guide-content__inner > blockquote {
    margin:      var(--space-8) 0;
    padding:     var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-primary);
    background:  var(--color-surface);
    color:       var(--color-text-muted);
    font-style:  italic;
    font-size:   var(--text-lg);
    line-height: 1.55;
}

.wf-guide-content__inner > blockquote p:last-child { margin-bottom: 0; }

/* Horizontal rule between major sections */
.wf-guide-content__inner > hr {
    border:       0;
    border-top:   1px solid var(--color-border);
    margin:       var(--space-10) 0;
}

/* Inline code + preformatted blocks */
.wf-guide-content__inner code {
    font-family:   var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size:     0.9em;
    background:    var(--color-surface-2);
    color:         var(--color-primary);
    padding:       2px 6px;
    border-radius: 4px;
}

.wf-guide-content__inner pre {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-4);
    overflow-x:    auto;
    margin:        var(--space-5) 0;
}

.wf-guide-content__inner pre code {
    background: transparent;
    padding: 0;
    color: var(--color-text);
}

/* Inline images — full-width with rounded corners. */
.wf-guide-content__inner img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--radius-md);
    margin-block:  var(--space-6);
}

@media (min-width: 768px) {
    .wf-guide-content__inner       { font-size: var(--text-lg); line-height: 1.75; }
    .wf-guide-content__inner > h2  { font-size: var(--text-4xl); }
    .wf-guide-content__inner > h3  { font-size: var(--text-2xl); }
}


/* =========================================================================
   SECTION 3 — Guide closing CTA
   Same shape as other dark CTA sections on the site for visual
   continuity. Stacks buttons vertically on mobile, side-by-side on
   desktop.
   ========================================================================= */

.wf-guide-cta {
    background:    var(--color-surface);
    padding-block: var(--space-16);
    border-top:    1px solid var(--color-border);
}

.wf-guide-cta__inner {
    text-align: center;
    max-width:  640px;
}

.wf-guide-cta__headline {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    700;
    color:          var(--color-text);
    line-height:    1.1;
    margin: 0 auto var(--space-3);
}

.wf-guide-cta__sub {
    font-family: var(--font-body);
    font-size:   var(--text-lg);
    color:       var(--color-text-muted);
    line-height: 1.55;
    margin: 0 auto var(--space-8);
    max-width:   46ch;
}

.wf-guide-cta__buttons {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    align-items:    stretch;
}

.wf-guide-cta__btn {
    justify-content: center;
}

@media (min-width: 768px) {
    .wf-guide-cta__headline { font-size: var(--text-4xl); }

    .wf-guide-cta__buttons {
        flex-direction:  row;
        justify-content: center;
        align-items:     center;
        gap:             var(--space-4);
    }
}