/**
 * B07 - Text Block Styles — design contract B07-TextBlock.dc.html
 *
 * Rich-text content block. The container holds alignment / padding / optional
 * background + text colour (set inline by the renderer); the inner content is
 * constrained to a comfortable reading column and centered.
 *
 * NOTE: the storefront theme defines aggressive element-level typography
 * (e.g. desktop `p` at 12px). To honour the design contract (body = 16px /
 * size-3, line-height 1.7) the content typography is scoped under
 * `.saly-ps-block-text-block .saly-ps-text-block-content` so it outranks the
 * theme's element rules without needing !important.
 *
 * CSS Isolation: ALL classes use the .saly-ps- prefix.
 */

.saly-ps-block-text-block {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

/* Container — alignment / padding / background-color / color come inline. */
.saly-ps-text-block {
    transition: background-color 0.2s ease;
}

/* Rounded card only when a background colour is set (design: --radius-lg = 12px). */
.saly-ps-text-block--has-bg {
    border-radius: 12px;
}

/* Reading column — design: max-width 760px, centered. Overridable via inline max-width. */
.saly-ps-text-block-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.7;
    color: inherit;
}

/* ===========================
   RICH-TEXT TYPOGRAPHY
   (block-scoped to beat the storefront theme's element rules)
   =========================== */

.saly-ps-block-text-block .saly-ps-text-block-content p {
    font-size: 1rem;          /* design: size-3 (16px) */
    line-height: 1.7;
    margin: 0 0 14px;
}

.saly-ps-block-text-block .saly-ps-text-block-content p:last-child {
    margin-bottom: 0;
}

.saly-ps-block-text-block .saly-ps-text-block-content h2 {
    font-size: 2rem;          /* design: size-9 (32px) */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: inherit;
}

.saly-ps-block-text-block .saly-ps-text-block-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.25rem 0 0.75rem;
    color: inherit;
}

.saly-ps-block-text-block .saly-ps-text-block-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 1rem 0 0.5rem;
    color: inherit;
}

.saly-ps-block-text-block .saly-ps-text-block-content a {
    color: var(--saly-ps-primary-color, #5E2CED);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.saly-ps-block-text-block .saly-ps-text-block-content a:hover {
    color: var(--saly-ps-primary-700, #3D10BE);
}

.saly-ps-block-text-block .saly-ps-text-block-content strong,
.saly-ps-block-text-block .saly-ps-text-block-content b {
    font-weight: 700;
}

.saly-ps-block-text-block .saly-ps-text-block-content em,
.saly-ps-block-text-block .saly-ps-text-block-content i {
    font-style: italic;
}

.saly-ps-block-text-block .saly-ps-text-block-content u {
    text-decoration: underline;
}

/* Lists — design: size-3 (16px), line-height 1.8, padding-left 22px */
.saly-ps-block-text-block .saly-ps-text-block-content ul,
.saly-ps-block-text-block .saly-ps-text-block-content ol {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 14px;
    padding-left: 22px;
}

.saly-ps-block-text-block .saly-ps-text-block-content ul {
    list-style-type: disc;
}

.saly-ps-block-text-block .saly-ps-text-block-content ol {
    list-style-type: decimal;
}

.saly-ps-block-text-block .saly-ps-text-block-content li {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0.25rem;
}

.saly-ps-block-text-block .saly-ps-text-block-content li:last-child {
    margin-bottom: 0;
}

/* Blockquotes */
.saly-ps-block-text-block .saly-ps-text-block-content blockquote {
    border-left: 4px solid #EBEEF1;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #717175;
}

/* Images */
.saly-ps-block-text-block .saly-ps-text-block-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
    display: block;
}

.saly-ps-text-block[style*="text-align: center"] .saly-ps-text-block-content img {
    margin-left: auto;
    margin-right: auto;
}

.saly-ps-text-block[style*="text-align: right"] .saly-ps-text-block-content img {
    margin-left: auto;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .saly-ps-block-text-block .saly-ps-text-block-content h2 {
        font-size: 1.625rem;
    }

    .saly-ps-block-text-block .saly-ps-text-block-content h3 {
        font-size: 1.25rem;
    }

    .saly-ps-block-text-block .saly-ps-text-block-content h4 {
        font-size: 1.125rem;
    }

    /* Keep breathing room even if a large padding was configured */
    .saly-ps-text-block {
        padding: 1.25rem !important;
    }
}

/* ===========================
   ACCESSIBILITY / MOTION
   =========================== */

@media (prefers-contrast: high) {
    .saly-ps-block-text-block .saly-ps-text-block-content a {
        text-decoration-thickness: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saly-ps-text-block,
    .saly-ps-block-text-block .saly-ps-text-block-content a {
        transition: none;
    }
}