/* Lottery page SEO copy (Josh, 27 Oct, rewritten 29 Oct 2026; markup in
   Views/Lottery/_LotterySeo.cshtml, linked from Views/Lottery/Index.cshtml and
   Views/Lottery/LoggedOutLotto.cshtml). Own prefix: pgseo-lotto-, in the same family as the
   homepage block (pgseo-, home-seo.css) and styled to match it. Self-contained: the Lottery views
   do not load home-v2.css, so the column, colours and headings the homepage takes from .pgh are
   set here, with the same values. Nothing here relies on lotto-page.css or on the logged-out
   database HTML.
   Desktop (992px and up, Josh, 29 Oct): capped like the homepage column (.pgh in home-v2.css:
   1200px, 24px side padding) so all four SEO blocks read at one width. The block also carries
   Bootstrap's .container, which site.css makes full width, so the cap is set on .pgseo-lotto.container
   to outrank it. FAQ two-up. Phones are as before. */

.pgseo-lotto {
    --pgseo-lotto-navy: #00263E;
    --pgseo-lotto-link: #C21E15;
    --pgseo-lotto-body: #3C3E41;
    --pgseo-lotto-line: #DCDDDF;
    clear: both;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pgseo-lotto-navy);
    text-align: left;
}

    .pgseo-lotto *, .pgseo-lotto *::before, .pgseo-lotto *::after { box-sizing: border-box; }
    .pgseo-lotto [hidden] { display: none !important; }

/* The page's H1 opens the SEO content at the bottom of the page. */
.pgseo-lotto-h1 { margin: 0; font-family: inherit; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--pgseo-lotto-navy); text-transform: none; }
.pgseo-lotto-h2 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--pgseo-lotto-navy); text-transform: none; }
.pgseo-lotto-h3 { margin: 6px 0 0; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pgseo-lotto-navy); text-transform: none; }

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

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

/* Straight or box: a plain bulleted list. */
.pgseo-lotto-list { max-width: 78ch; margin: 0; padding-left: 22px; }
    .pgseo-lotto-list li { margin: 0 0 6px; padding-left: 4px; }
        .pgseo-lotto-list li:last-child { margin-bottom: 0; }

/* Phones: "Read more" (the script in _LotterySeo adds .is-collapsed). The opening paragraph shows;
   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-lotto-more { display: none; }

@media (max-width: 991.98px) {
    .pgseo-lotto-collapsible.is-collapsed .pgseo-lotto-rest { display: none; }
    .pgseo-lotto-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-lotto-link);
        cursor: pointer;
    }
        .pgseo-lotto-more::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; transition: transform .15s; }
        .pgseo-lotto-more[aria-expanded="true"]::after { transform: rotate(180deg); }
        .pgseo-lotto-more:focus-visible { outline: 3px solid var(--pgseo-lotto-navy); outline-offset: 2px; border-radius: 4px; }
        .pgseo-lotto-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-lotto-faq { border: 1px solid var(--pgseo-lotto-line); border-radius: 10px; background: #ffffff; }
    .pgseo-lotto-faq details { border-bottom: 1px solid var(--pgseo-lotto-line); }
        .pgseo-lotto-faq details:last-child { border-bottom: 0; }
    .pgseo-lotto-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-lotto-faq summary::-webkit-details-marker { display: none; }
        .pgseo-lotto-faq summary::after { content: "\f078"; flex-shrink: 0; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--pgseo-lotto-link); transition: transform .15s; }
        .pgseo-lotto-faq details[open] summary::after { transform: rotate(180deg); }
        .pgseo-lotto-faq summary:focus-visible { outline: 3px solid var(--pgseo-lotto-navy); outline-offset: -3px; border-radius: 10px; }
.pgseo-lotto-faq-q { margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--pgseo-lotto-navy); text-transform: none; }
.pgseo-lotto-faq-a { padding: 0 16px 16px; }

/* Phones and tablets: the block's own column, as before (the .container rules give way to it). */
@media (max-width: 991.98px) {
    .pgseo-lotto { max-width: 1200px; margin: 0 auto; padding: 32px 16px; }
}

/* Desktop: width and side padding come from .container (above); only the top and bottom are set
   here. Text spans the full width and the FAQ sits two-up. */
/* The four games: an accordion of cards like the FAQ's, full width and the same at every size.
   Each card shows the game's H3 and a one-line summary; its full copy opens in place and stays in
   the HTML when closed, so search engines read it. */
.pgseo-lotto-games { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.pgseo-lotto-game { border: 1px solid var(--pgseo-lotto-line); border-radius: 10px; background: #ffffff; }
    .pgseo-lotto-game summary { min-height: 56px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; cursor: pointer; list-style: none; }
        .pgseo-lotto-game summary::-webkit-details-marker { display: none; }
        .pgseo-lotto-game summary::after { content: "\f078"; grid-column: 2; grid-row: 1 / span 2; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--pgseo-lotto-link); transition: transform .15s; }
        .pgseo-lotto-game[open] summary::after { transform: rotate(180deg); }
        .pgseo-lotto-game summary:focus-visible { outline: 3px solid var(--pgseo-lotto-navy); outline-offset: -3px; border-radius: 10px; }
    .pgseo-lotto-game .pgseo-lotto-h3 { grid-column: 1; margin: 0; font-size: 16px; }
.pgseo-lotto-game-sum { grid-column: 1; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--pgseo-lotto-body); }
.pgseo-lotto-game-body { padding: 0 16px 16px; }

@media (min-width: 992px) {
    .pgseo-lotto.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 40px 24px; gap: 36px; }
    .pgseo-lotto-h1 { font-size: 28px; }
    .pgseo-lotto-h2 { font-size: 22px; }
    .pgseo-lotto-part p, .pgseo-lotto-faq-a p, .pgseo-lotto-list { max-width: none; }

    /* FAQ: one card per question, two columns; DOM order (and the schema) unchanged. */
    .pgseo-lotto-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; border: 0; border-radius: 0; background: none; }
        .pgseo-lotto-faq details, .pgseo-lotto-faq details:last-child { border: 1px solid var(--pgseo-lotto-line); border-radius: 10px; background: #ffffff; }
}