/* Homepage SEO copy (Josh, 14 Oct, rewritten 29 Oct 2026; markup in Views/Home/Index.cshtml and
   Views/Home/_HomeSeo.cshtml). Linked only from the home view. The copy sits inside a .pgh column,
   so it takes that column's colours and spacing from home-v2.css. The prefix is pgseo, not pgs:
   .pgs is the sign-up sheet's full-screen overlay (signup-v2.css, loaded on every page), and
   sharing it pinned this copy over the hero (28 Oct). */

/* The page's H1 opens the SEO content at the bottom of the page, below "Find a store near you".
   It sits in the .pgh column, so the column's gap spaces it. */
.pgseo-h1 {
    margin: 0;
    font-family: inherit;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--pgh-navy);
}

/* The copy follows the store finder, so the column needs no extra top padding of its own. */
.pgh.pgseo { padding-top: 0; }

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

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

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

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

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

/* Desktop (Josh, 29 Oct 2026): the copy runs the full width of the homepage's content column,
   like the cards and "Find a store near you" above it. The block is that same .pgh column
   (home-v2.css: 1200px wide at most, 24px each side at 992px and up), so lifting the 78ch cap is
   all it takes. The FAQ goes two across, each question with its answer in one cell; the order on
   the page and in the FAQPage schema is unchanged. Phones keep everything above. */
@media (min-width: 992px) {
    .pgseo-h1 { font-size: 28px; }
    .pgseo-part p, .pgseo-faq-a p { max-width: none; }
    .pgseo-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-faq details, .pgseo-faq details:last-child { border: 1px solid var(--pgh-line); border-radius: 10px; background: #ffffff; }
}