/* Winning Numbers SEO copy (Josh, 29 Oct 2026; markup in Views/Home/Results.cshtml and
   Views/Home/_ResultsSeo.cshtml). Linked only from the Results view. Same look as the homepage block
   (home-seo.css): the homepage's .pgh column tokens are not loaded here, so the wrapper carries the
   same values itself. Prefix pgseo-wn (winning numbers), its own within the pgseo family, so it can
   never meet the homepage block or the sign-up sheet's .pgs overlay. */

/* The column: the same width and side padding as the results above (.pg-results in results.css),
   so the copy lines up with the tables. The results already leave 48px (64px on desktop) below
   them, so the column adds no top padding of its own. */
.pgseo-wn {
    --pgseo-wn-navy: #00263E;
    --pgseo-wn-link: #C21E15;
    --pgseo-wn-body: #3C3E41;
    --pgseo-wn-line: #DCDDDF;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 12px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pgseo-wn-navy);
}
    .pgseo-wn *, .pgseo-wn *::before, .pgseo-wn *::after { box-sizing: border-box; }
    .pgseo-wn [hidden] { display: none !important; }

@media (min-width: 768px) {
    .pgseo-wn { padding: 0 20px 64px; }
}

/* The page's H1 opens the SEO content below the results. The banner keeps its own text and look. */
.pgseo-wn-h1 {
    margin: 0;
    font-family: inherit;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--pgseo-wn-navy);
}

.pgseo-wn-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pgseo-wn-h2 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--pgseo-wn-navy); }
.pgseo-wn-h3 { margin: 6px 0 0; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pgseo-wn-navy); }

/* Body copy: one H2 section after another. */
.pgseo-wn-collapsible { gap: 24px; }
.pgseo-wn-rest { display: flex; flex-direction: column; gap: 24px; }
.pgseo-wn-part { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.pgseo-wn-part, .pgseo-wn-faq-a { font-size: 15px; line-height: 1.6; color: var(--pgseo-wn-body); }
    .pgseo-wn-part p, .pgseo-wn-faq-a p { max-width: 78ch; margin: 0; }
    .pgseo-wn-faq-a p + p { margin-top: 12px; }
    .pgseo-wn-part a, .pgseo-wn-faq-a a { font-weight: 600; color: var(--pgseo-wn-link); text-decoration: underline; text-underline-offset: 2px; }
        .pgseo-wn-part a:hover, .pgseo-wn-faq-a a:hover { color: var(--pgseo-wn-navy); }

/* Phones: "Read more" (the script in _ResultsSeo adds .is-collapsed). The opening sections show;
   the rest is hidden on screen only. It stays in the HTML, so search engines read every word.
   Desktop never hides anything and never shows the button. */
.pgseo-wn-more { display: none; }

@media (max-width: 991.98px) {
    .pgseo-wn-collapsible.is-collapsed .pgseo-wn-rest { display: none; }
    .pgseo-wn-more {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        margin-top: -12px;
        padding: 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: var(--pgseo-wn-link);
        cursor: pointer;
    }
        .pgseo-wn-more::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; transition: transform .15s; }
        .pgseo-wn-more[aria-expanded="true"]::after { transform: rotate(180deg); }
        .pgseo-wn-more:focus-visible { outline: 3px solid var(--pgseo-wn-navy); outline-offset: 2px; border-radius: 4px; }
        .pgseo-wn-more[hidden] { display: none; }
}

/* FAQ: one bordered list of questions that open in place. The answers stay in the HTML when
   closed, so search engines read them, and they match the FAQPage schema word for word. */
.pgseo-wn-faq { border: 1px solid var(--pgseo-wn-line); border-radius: 10px; background: #ffffff; }
    .pgseo-wn-faq details { border-bottom: 1px solid var(--pgseo-wn-line); }
        .pgseo-wn-faq details:last-child { border-bottom: 0; }
    .pgseo-wn-faq summary { min-height: 56px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
        .pgseo-wn-faq summary::-webkit-details-marker { display: none; }
        .pgseo-wn-faq summary::after { content: "\f078"; flex-shrink: 0; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--pgseo-wn-link); transition: transform .15s; }
        .pgseo-wn-faq details[open] summary::after { transform: rotate(180deg); }
        .pgseo-wn-faq summary:focus-visible { outline: 3px solid var(--pgseo-wn-navy); outline-offset: -3px; border-radius: 10px; }
.pgseo-wn-faq-q { margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--pgseo-wn-navy); }
.pgseo-wn-faq-a { padding: 0 16px 16px; }

/* Desktop (Josh, 29 Oct 2026): the copy runs the full width of the results column above it
   (.pgseo-wn already matches .pg-results: 1240px less 20px each side), with no 78ch cap, and the
   FAQ sits in two columns, each question with its answer as one card. DOM order, and so the
   FAQPage schema, is unchanged. Phones keep the single bordered list above. */
@media (min-width: 992px) {
    .pgseo-wn-h1 { font-size: 28px; }
    .pgseo-wn-part p, .pgseo-wn-faq-a p { max-width: none; }
    .pgseo-wn-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; border: 0; border-radius: 0; background: none; }
        .pgseo-wn-faq details, .pgseo-wn-faq details:last-child { border: 1px solid var(--pgseo-wn-line); border-radius: 10px; background: #ffffff; }
}