/* Page Content Styles */
/* These styles apply to WordPress Gutenberg content in page.php */

.td-page-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* space-y-4 */
}

/* Headings */
.td-page-content h2 {
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
    /* leading-7 */
    font-weight: 500;
    /* font-medium */
    color: var(--color-gray-darker);
}

@media (min-width: 640px) {
    .td-page-content h2 {
        font-size: 1.5rem;
        /* 24px */
        line-height: 2.25rem;
        /* leading-9 */
    }
}

.td-page-content h3 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-gray-darker);
}

@media (min-width: 640px) {
    .td-page-content h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

/* Paragraphs */
.td-page-content p {
    font-size: 1rem;
    /* text-base */
    line-height: 1.75rem;
    /* leading-7 */
    color: var(--color-gray);
}

/* Lists */
.td-page-content ul,
.td-page-content ol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* space-y-4 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.td-page-content ul li,
.td-page-content ol li {
    font-size: 1rem;
    /* text-base */
    line-height: 1.75rem;
    /* leading-7 */
    color: var(--color-gray);
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    /* gap-1 */
}

/* Bullet point for unordered lists */
.td-page-content ul li::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    /* size-7 */
    height: 1.75rem;
    padding-top: 0.5rem;
}

.td-page-content ul li::before {
    content: '';
    width: 0.75rem;
    /* size-3 */
    height: 0.75rem;
    border-radius: 9999px;
    /* rounded-full */
    background-color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.5rem;
    margin-inline-end: 0.5rem;
}

/* Ordered list numbers */
.td-page-content ol {
    counter-reset: list-counter;
}

.td-page-content ol li::before {
    counter-increment: list-counter;
    content: counter(list-counter) ".";
    font-weight: 500;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 1.75rem;
    margin-inline-end: 0.25rem;
}

/* Links */
.td-page-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.td-page-content a:hover {
    color: var(--color-primary-dark);
}

/* Blockquote */
.td-page-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding-inline-start: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--color-gray);
}

/* Images */
.td-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Tables */
.td-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.td-page-content th,
.td-page-content td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    text-align: start;
}

.td-page-content th {
    background-color: var(--color-ghost-white);
    font-weight: 500;
    color: var(--color-gray-darker);
}

.td-page-content td {
    color: var(--color-gray);
}

/* Code blocks */
.td-page-content code {
    background-color: var(--color-ghost-white);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.875rem;
}

.td-page-content pre {
    background-color: var(--color-ghost-white);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.td-page-content pre code {
    background: none;
    padding: 0;
}