/* Promotions page SEO copy (Josh, 27 Oct, rewritten 29 Oct 2026; markup in
   Views/Home/_PromotionsSeo.cshtml, linked from Views/Home/PromoAndRewards.cshtml). Own prefix:
   pgseo-promo-, in the homepage's pgseo family (home-seo.css) but its own names, so the two never
   share a rule. It sits below the page's .pgp column and matches its width, font and colours
   (promotion-page.css) without touching any of its rules. Type, spacing, FAQ and "Read more" follow
   the homepage block. From 992px the copy runs the full width of that column, the same as the
   promotion cards above it (Josh, 29 Oct 2026): no line-length cap, the Saturday prize table
   beside its copy, and the FAQ in two columns. Phones are unchanged. The prize table shows the
   cash prizes and folds the free-spin rows behind a button at every width. */

.pgseo-promo {
    --pgseo-promo-navy: #00263E;
    --pgseo-promo-link: #C21E15;
    --pgseo-promo-body: #3C3E41;
    --pgseo-promo-line: #DCDDDF;
    --pgseo-promo-soft: #F7F7F8;
    margin: 0 auto;
    padding: 0 16px 40px;
    max-width: 1120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pgseo-promo-navy);
}

/* Body copy: the opening, then one H2 section after another. */
/* No rule above the copy: it follows straight on from the page's "Play responsibly" line, and the
   one rule sits below the block, above the footer (Josh, 30 Oct 2026). */
.pgseo-promo-collapsible { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pgseo-promo::after { content: ""; display: block; border-top: 1px solid var(--pgseo-promo-line); }
.pgseo-promo-rest { display: flex; flex-direction: column; gap: 24px; }
.pgseo-promo-part { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.pgseo-promo-h2 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--pgseo-promo-navy); }
.pgseo-promo-h3 { margin: 6px 0 0; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pgseo-promo-navy); }

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

/* How Promotions Work: a plain numbered list. */
.pgseo-promo-steps { max-width: 78ch; margin: 0; padding-left: 22px; }
    .pgseo-promo-steps li { margin: 0 0 6px; padding-left: 4px; }
        .pgseo-promo-steps li:last-child { margin-bottom: 0; }
    .pgseo-promo-steps strong { font-weight: 700; color: var(--pgseo-promo-navy); }

/* Saturday tournament prizes: real content, so a plain table. */
.pgseo-promo-sat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pgseo-promo-tw { max-width: 520px; overflow-x: auto; }
.pgseo-promo-table { width: 100%; margin: 4px 0 0; border-collapse: collapse; font-size: 14px; border: 1px solid var(--pgseo-promo-line); }
    .pgseo-promo-table th, .pgseo-promo-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--pgseo-promo-line); }
    .pgseo-promo-table th { background: var(--pgseo-promo-soft); font-weight: 700; color: var(--pgseo-promo-navy); }
    .pgseo-promo-table td:first-child { font-weight: 600; color: var(--pgseo-promo-navy); white-space: nowrap; }

/* The free-spin rows collapse behind a button at every width (the script in _PromotionsSeo adds
   .is-collapsed). Hidden on screen only: the rows stay in the HTML. */
.pgseo-promo-prizes.is-collapsed .pgseo-promo-spins { display: none; }
.pgseo-promo-allprizes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--pgseo-promo-link);
    cursor: pointer;
}
    .pgseo-promo-allprizes::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; transition: transform .15s; }
    .pgseo-promo-allprizes[aria-expanded="true"]::after { transform: rotate(180deg); }
    .pgseo-promo-allprizes:focus-visible { outline: 3px solid var(--pgseo-promo-navy); outline-offset: 2px; border-radius: 4px; }
    .pgseo-promo-allprizes[hidden] { display: none; }

.pgseo-promo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

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

/* Same side padding as the .pgp column from tablet width, so the copy lines up with the cards. */
@media (min-width: 768px) {
    .pgseo-promo { padding: 0 24px 48px; }
}

@media (min-width: 992px) {
    .pgseo-promo { gap: 36px; }
    .pgseo-promo-h2 { font-size: 22px; }

    /* Full column width, like the cards above: no line-length cap. */
    .pgseo-promo-lead, .pgseo-promo-part p, .pgseo-promo-faq-a p, .pgseo-promo-steps { max-width: none; }

    /* Saturday: copy on the left, the prize table beside it. */
    .pgseo-promo-sat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; }
        .pgseo-promo-sat .pgseo-promo-tw { max-width: none; }
        .pgseo-promo-sat .pgseo-promo-table { margin: 0; }

    /* FAQ: two columns, each question with its answer as one cell. DOM order (and so the schema
       order) is unchanged: the grid reads left to right, row by row. */
    .pgseo-promo-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-promo-faq details, .pgseo-promo-faq details:last-child { border: 1px solid var(--pgseo-promo-line); border-radius: 10px; background: #ffffff; }
}