/* ==========================================================================
   Generic content page (Page.aspx) — modern redesign
   Serves the CMS-driven pages: Privacy Policy, Terms and Conditions,
   About Us, Shipping and Return Policy, FAQs.
   Scoped under .pg-content-page (classes prefixed pg-) so shared theme
   classes aren't affected on other pages.
   Palette: coral #FF6B4A / teal #1F7A6C / cream #FFF6EE on warm neutrals.
   Type: Fredoka (headings) + Nunito Sans (body) — loaded from the master page.
   ========================================================================== */

.pg-content-page {
    --pg-coral: #FF6B4A;
    --pg-coral-dark: #E24E2F;
    --pg-coral-soft: rgba(255, 107, 74, 0.08);
    --pg-teal: #1F7A6C;
    --pg-teal-dark: #145E53;
    --pg-gold: #FFB238;
    --pg-green: #2FA36B;
    --pg-cream: #FFF6EE;
    --pg-ink: #241F1B;
    --pg-body: #6B6058;
    --pg-muted: #A49A91;
    --pg-border: #F0E2D6;
    --pg-surface: #FFFFFF;
    --pg-radius: 16px;
    --pg-radius-sm: 10px;
    --pg-shadow: 0 10px 30px rgba(36, 31, 27, 0.07);

    color: var(--pg-body);
    font-family: "Nunito Sans", Arial, sans-serif;
}

/* ---------- Page head ---------- */

.pg-head {
    margin: 4px 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pg-border);
}

.pg-head::before {
    content: "";
    display: block;
    width: 46px;
    height: 6px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--pg-coral), var(--pg-teal));
}

.pg-page-title {
    margin: 0;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--pg-ink);
}

/* ---------- Optional banner image ---------- */

.pg-banner {
    margin: 0 0 24px;
}

.pg-banner:empty {
    display: none;
}

.pg-banner img {
    width: 100%;
    border-radius: var(--pg-radius);
}

/* ---------- Table of contents ---------- */

.pg-toc {
    display: none;
    background: var(--pg-cream);
    border: 1px dashed var(--pg-border);
    border-radius: var(--pg-radius-sm);
    padding: 16px 20px;
    margin: 0 0 24px;
}

.pg-toc.pg-toc-show {
    display: block;
}

.pg-toc-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pg-muted);
    margin-bottom: 8px;
}

.pg-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.pg-toc a {
    font-size: 14px;
    font-weight: 700;
    color: var(--pg-teal);
    text-decoration: none;
}

.pg-toc a:hover {
    color: var(--pg-coral);
    text-decoration: underline;
}

/* ---------- Prose (CMS rich-text content) ---------- */

.pg-prose {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    padding: 32px 34px;
    font-size: 15px;
    line-height: 1.75;
    overflow-x: auto;
}

.pg-prose h1,
.pg-prose h2,
.pg-prose h3,
.pg-prose h4 {
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-weight: 600;
    text-align: left;
    color: var(--pg-ink);
    margin: 26px 0 12px;
    scroll-margin-top: 100px;
}

.pg-prose h1:first-child,
.pg-prose h2:first-child,
.pg-prose h3:first-child,
.pg-prose p:first-child {
    margin-top: 0;
}

/* CMS content sometimes contains its own <h1> (e.g. "TERMS OF USE") in
   addition to the page's real title above — keep it as a modest heading
   rather than letting two H1-sized headlines compete. */
.pg-prose h1 { font-size: 20px; }
.pg-prose h2 { font-size: 20px; }
.pg-prose h3 { font-size: 17px; }
.pg-prose h4 { font-size: 15px; }

.pg-prose p {
    margin: 0 0 14px;
}

.pg-prose ul,
.pg-prose ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.pg-prose li {
    margin-bottom: 6px;
}

.pg-prose a {
    color: var(--pg-teal);
}

.pg-prose a:hover {
    color: var(--pg-coral);
}

.pg-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pg-radius-sm);
}

.pg-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
}

.pg-prose table th,
.pg-prose table td {
    border: 1px solid var(--pg-border);
    padding: 8px 10px;
    text-align: left;
}

.pg-prose blockquote {
    margin: 0 0 16px;
    padding: 16px 20px;
    background: var(--pg-cream);
    border-left: 4px solid var(--pg-coral);
    border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
    color: var(--pg-ink);
}

.pg-prose blockquote p:last-child {
    margin-bottom: 0;
}

/* ---------- FAQ accordion (built client-side from Que:/Ans: paragraphs) ---------- */

.pg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 18px;
}

.pg-faq-item {
    background: var(--pg-cream);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-sm);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.pg-faq-item.pg-open {
    border-color: var(--pg-coral);
}

.pg-faq-q {
    display: block;
    width: 100%;
    position: relative;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: "Nunito Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pg-ink);
    padding: 14px 44px 14px 18px;
}

.pg-faq-q::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--pg-coral);
}

.pg-faq-item.pg-open .pg-faq-q::after {
    content: "\2212";
}

.pg-faq-a {
    max-height: 0;
    overflow: hidden;
    background: var(--pg-surface);
    transition: max-height 0.3s ease;
}

.pg-faq-item.pg-open .pg-faq-a {
    max-height: 2000px;
}

.pg-faq-a p {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pg-body);
}

.pg-faq-a p:first-child {
    padding-top: 2px;
}

/* ---------- Sidebar: help card ---------- */

.pg-help-card {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    padding: 26px 22px;
    margin-bottom: 24px;
    text-align: center;
}

.pg-help-card i {
    font-size: 30px;
    color: var(--pg-coral);
}

.pg-help-title {
    margin: 10px 0 6px;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-help-title span {
    color: var(--pg-coral);
}

.pg-help-phone {
    display: inline-block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--pg-teal);
    text-decoration: none;
}

.pg-help-phone:hover {
    color: var(--pg-coral);
}

.pg-help-card small {
    display: block;
    margin-top: 10px;
    color: var(--pg-muted);
    font-size: 12.5px;
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
    .pg-page-title {
        font-size: 25px;
    }

    .pg-prose {
        padding: 22px 20px;
    }

    .pg-toc ul {
        gap: 6px 14px;
    }
}