/**
 * TransferJet — rich content.
 *
 * Hyvä's templates mark CMS blocks, category descriptions and product
 * descriptions with class="prose", but @tailwindcss/typography is not part of
 * this build, so nothing defines it. Rather than pull in the plugin — which
 * brings its own opinionated type scale that would fight the JetTheme
 * typography — .prose is defined here with the values this theme wants.
 *
 */

 /* Descriptions are authored as <p> blocks or as <br/> lines, which sit in the
   container as text nodes — .prose reaches those, .prose p does not. The pair
   is looser than the paragraphs by roughly the margin paragraphs get. */
.prose,
.product-description {
    line-height: 2.15;
}

.prose p,
.prose li,
.prose td {
    line-height: 2;
}

.prose > * + * {
    margin-top: 1em;
}

.prose p {
    margin-bottom: 1em;
}

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

.prose h2,
.prose h3,
.prose h4 {
    margin-bottom: 0.5em;
    margin-top: 1.5em;
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.prose ul {
    list-style: disc outside;
}

.prose ol {
    list-style: decimal outside;
}

.prose li {
    margin-bottom: 0.25em;
}

.prose a {
    color: var(--color-secondary);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--color-secondary-darker);
}

.prose strong,
.prose b {
    font-weight: 700;
}

.prose table {
    margin-bottom: 1em;
    width: 100%;
}

.prose th,
.prose td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.5em 0.75em;
    text-align: left;
}

/* ---------------------------------------------------------------------------
   Category descriptions.

   Authored in Page Builder, so the markup arrives as nested rows and inner
   wrappers carrying inline styles — padding on the row, a margin on the inner
   element — which cannot be overridden from here without !important and are
   not worth fighting. What is worth setting is what Page Builder leaves alone:
   the space the block occupies in the page, and the treatment of a bare text
   node, which Page Builder emits with no <p> around it.
   --------------------------------------------------------------------------- */

.category-description {
    margin-bottom: 2rem;
}

/* Page Builder's row and inner wrappers already carry their own inline
   padding; collapsing the outer margins stops it compounding into a gap far
   larger than intended. */
.category-description > [data-content-type="row"]:first-child {
    padding-block-start: 0 !important;
}

.category-description > [data-content-type="row"]:last-child {
    padding-block-end: 0 !important;
}

.category-description [data-element="inner"]:last-child {
    margin-block-end: 0 !important;
}

/* Running copy on a phone. The size is scoped to the description surfaces, not
   to .prose — the reCaptcha legal notice is .prose and is meant to be small.
   Last in the file: .product-description sets its leading above at the same
   specificity, so source order settles it. */

@media (max-width: 639px) {
    .tj-description,
    .product-description,
    .category-description {
        font-size: 1.0625rem;
    }

    /* Same split, one step down for the larger size. */
    .prose,
    .product-description {
        line-height: 2;
    }

    .prose p,
    .prose li,
    .prose td {
        line-height: 1.85;
    }
}