/* ==========================================================================
   GENERIC PAGE — default template (e.g. Privacy Policy, plain content pages)
   ========================================================================== */

.page-content {
    padding-block: clamp(3rem, 5.2vw, 6rem);
}

/* No max-width/container here on purpose: pages on the default template can
   also contain ACF Gutenberg blocks (e.g. Review Item), which are full-width
   sections with their own background + internal .container. Squeezing this
   wrapper down to a narrow reading column would squeeze those blocks too.
   The narrow reading width below is applied per text element instead, so
   plain text reads comfortably while blocks stay full width. */
.page-content__inner {
    width: 100%;
}

/* Every generic tag rule below targets DIRECT children only (">") and uses
   :where() for zero specificity, for the same reason: a block's own wrapper
   (e.g. <section class="block-review-item">) is a direct child too, but its
   internal h2/p/blockquote/img are nested *inside* it — grandchildren, not
   direct children — so these rules can't reach into a block's internals at
   all, no matter what properties the block does or doesn't style itself
   (":where()" alone isn't enough for that — it only helps when a competing
   rule exists for the same property; a block that never sets e.g.
   blockquote's border/margin would still inherit ours). */

:where(.page-content__inner > p, .page-content__inner > h2, .page-content__inner
        > h3, .page-content__inner > h4, .page-content__inner
        > h5, .page-content__inner > h6, .page-content__inner
        > ul, .page-content__inner > ol, .page-content__inner
        > blockquote, .page-content__inner > table, .page-content__inner
        > .page-links) {
    box-sizing: border-box;
    max-width: 860px;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Centering needs real specificity: style.css (underscores.me boilerplate)
   has a bare "p { margin: 0; }" reset that outranks a zero-specificity
   :where() rule and was overriding margin-left/right, so text stuck flush
   left instead of centering. Kept in its own rule (not folded into the
   :where() block above) so only centering gets promoted — width/padding
   stay :where()'d so a block-style variation like .is-style-intro can still
   set its own wider max-width/padding without a fight. */
.page-content__inner > p,
.page-content__inner > h2,
.page-content__inner > h3,
.page-content__inner > h4,
.page-content__inner > h5,
.page-content__inner > h6,
.page-content__inner > ul,
.page-content__inner > ol,
.page-content__inner > blockquote,
.page-content__inner > table,
.page-content__inner > .page-links {
    margin-left: auto;
    margin-right: auto;
}

/* Text
   -------------------------------------------------------------------------- */
:where(.page-content__inner > p) {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 1.69;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 1.25rem;
}

:where(.page-content__inner > p:last-child) {
    margin-bottom: 0;
}

:where(.page-content__inner > p strong) {
    font-weight: 600;
    color: var(--color-dark);
}

:where(.page-content__inner > p a) {
    color: var(--color-terracotta);
}

/* Headings
   -------------------------------------------------------------------------- */
:where(.page-content__inner > h2) {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.08vw, 2.5rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--color-dark);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

:where(.page-content__inner > h2:first-child) {
    margin-top: 0;
}

:where(.page-content__inner > h3) {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.56vw, 1.875rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--color-dark);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

:where(.page-content__inner > h4, .page-content__inner
        > h5, .page-content__inner > h6) {
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.25vw, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Lists
   -------------------------------------------------------------------------- */
:where(.page-content__inner > ul, .page-content__inner > ol) {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 1.69;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 1.25rem;
}

:where(.page-content__inner > ul li + li, .page-content__inner > ol li + li) {
    margin-top: 0.4em;
}

:where(.page-content__inner > ul) {
    list-style: none;
}

:where(.page-content__inner > ul li) {
    position: relative;
    padding-left: 1.25rem;
}

:where(.page-content__inner > ul li)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-terracotta);
}

/* Blockquote
   -------------------------------------------------------------------------- */
:where(.page-content__inner > blockquote) {
    border-left: 3px solid var(--color-terracotta);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 0;
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-style: italic;
    color: var(--color-text);
}

/* Images (only ones dropped directly into the text flow, e.g. inside a
   paragraph — a full-width ACF block's own image sits outside this scope) */
:where(.page-content__inner > p > img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
    border-radius: 4px;
}

/* Table (e.g. Yoast/WP privacy policy table) */
:where(.page-content__inner > table) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

:where(.page-content__inner > table th, .page-content__inner > table td) {
    border: 1px solid var(--color-bg-taupe);
    padding: 0.6rem 0.8rem;
    text-align: left;
}

:where(.page-content__inner > table th) {
    font-family: var(--font-serif);
    color: var(--color-dark);
    background: var(--color-bg-sand);
}

/* Pagination (multi-page posts) */
:where(.page-content__inner > .page-links) {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-top: 2rem;
}

/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .page-content {
        padding-block: clamp(2rem, 8vw, 3rem);
    }

    :where(.page-content__inner > p),
    :where(.page-content__inner > ul, .page-content__inner > ol) {
        font-size: 1rem;
    }

    :where(.page-content__inner > h2) {
        font-size: clamp(1.375rem, 6vw, 1.75rem);
        margin-top: 2rem;
        margin-bottom: 0.85rem;
    }

    :where(.page-content__inner > h3) {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }
}