/**
 * Rentalno Theme - Typography Styles
 * 
 * Complete typography system for posts, pages, and content areas.
 * Includes headings, paragraphs, lists, quotes, tables, and more.
 *
 * @package Rentalno_Theme
 */

/* ==========================================================================
   Base Typography
   ========================================================================== */

.post-content,
.page-content,
.entry-content,
.prose {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
    color: #334155; /* slate-700 */
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */

.post-content p,
.page-content p,
.entry-content p,
.prose p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.post-content p:last-child,
.page-content p:last-child,
.entry-content p:last-child,
.prose p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph */
.post-content p.lead,
.page-content p.lead,
.entry-content p.lead,
.prose p.lead {
    font-size: 1.25rem;
    color: #64748b; /* slate-500 */
    font-weight: 500;
}

/* ==========================================================================
   Headings (H1 - H6)
   ========================================================================== */

.post-content h1,
.page-content h1,
.entry-content h1,
.prose h1 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    color: #0f172a; /* primary */
    letter-spacing: -0.025em;
}

.post-content h2,
.page-content h2,
.entry-content h2,
.prose h2 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.75em;
    color: #0f172a;
    letter-spacing: -0.02em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #e2e8f0; /* slate-200 */
}

.post-content h3,
.page-content h3,
.entry-content h3,
.prose h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
    color: #0f172a;
}

.post-content h4,
.page-content h4,
.entry-content h4,
.prose h4 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #0f172a;
}

.post-content h5,
.page-content h5,
.entry-content h5,
.prose h5 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-content h6,
.page-content h6,
.entry-content h6,
.prose h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #64748b; /* slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* First heading (no top margin) */
.post-content > h1:first-child,
.page-content > h1:first-child,
.entry-content > h1:first-child,
.prose > h1:first-child,
.post-content > h2:first-child,
.page-content > h2:first-child,
.entry-content > h2:first-child,
.prose > h2:first-child,
.post-content > h3:first-child,
.page-content > h3:first-child,
.entry-content > h3:first-child,
.prose > h3:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Bold, Italic, Underline, Strikethrough
   ========================================================================== */

.post-content strong,
.page-content strong,
.entry-content strong,
.prose strong,
.post-content b,
.page-content b,
.entry-content b,
.prose b {
    font-weight: 700;
    color: #0f172a; /* primary */
}

.post-content em,
.page-content em,
.entry-content em,
.prose em,
.post-content i,
.page-content i,
.entry-content i,
.prose i {
    font-style: italic;
}

.post-content u,
.page-content u,
.entry-content u,
.prose u {
    text-decoration: underline;
    text-decoration-color: #D4AF37; /* accent */
    text-underline-offset: 3px;
}

.post-content s,
.page-content s,
.entry-content s,
.prose s,
.post-content del,
.page-content del,
.entry-content del,
.prose del {
    text-decoration: line-through;
    color: #94a3b8; /* slate-400 */
}

.post-content mark,
.page-content mark,
.entry-content mark,
.prose mark {
    background-color: #fef9c3; /* yellow-100 */
    padding: 0.125em 0.25em;
    border-radius: 0.25rem;
}

/* ==========================================================================
   Links
   ========================================================================== */

.post-content a,
.page-content a,
.entry-content a,
.prose a {
    color: #D4AF37; /* accent */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.post-content a:hover,
.page-content a:hover,
.entry-content a:hover,
.prose a:hover {
    color: #B8962E; /* gold-hover */
    border-bottom-color: currentColor;
}

/* ==========================================================================
   Unordered Lists (ul)
   ========================================================================== */

.post-content ul,
.page-content ul,
.entry-content ul,
.prose ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.post-content ul ul,
.page-content ul ul,
.entry-content ul ul,
.prose ul ul {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.post-content ul ul ul,
.page-content ul ul ul,
.entry-content ul ul ul,
.prose ul ul ul {
    list-style-type: square;
}

.post-content ul li,
.page-content ul li,
.entry-content ul li,
.prose ul li {
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    color: #334155;
}

/* Custom styled list */
.post-content ul.styled-list,
.page-content ul.styled-list {
    list-style: none;
    padding-left: 0;
}

.post-content ul.styled-list li,
.page-content ul.styled-list li {
    position: relative;
    padding-left: 1.75em;
}

.post-content ul.styled-list li::before,
.page-content ul.styled-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.5em;
    height: 0.5em;
    background-color: #D4AF37; /* accent */
    border-radius: 50%;
}

/* ==========================================================================
   Ordered Lists (ol)
   ========================================================================== */

.post-content ol,
.page-content ol,
.entry-content ol,
.prose ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.post-content ol ol,
.page-content ol ol,
.entry-content ol ol,
.prose ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.post-content ol ol ol,
.page-content ol ol ol,
.entry-content ol ol ol,
.prose ol ol ol {
    list-style-type: lower-roman;
}

.post-content ol li,
.page-content ol li,
.entry-content ol li,
.prose ol li {
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    color: #334155;
}

/* ==========================================================================
   Definition Lists (dl)
   ========================================================================== */

.post-content dl,
.page-content dl,
.entry-content dl,
.prose dl {
    margin-bottom: 1.5em;
}

.post-content dt,
.page-content dt,
.entry-content dt,
.prose dt {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25em;
}

.post-content dd,
.page-content dd,
.entry-content dd,
.prose dd {
    margin-left: 1.5em;
    margin-bottom: 1em;
    color: #64748b;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

.post-content blockquote,
.page-content blockquote,
.entry-content blockquote,
.prose blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid #D4AF37; /* accent */
    background-color: #f8fafc; /* slate-50 */
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: normal;
    color: #334155;
}

.post-content blockquote p,
.page-content blockquote p,
.entry-content blockquote p,
.prose blockquote p {
    margin-bottom: 0;
}

.post-content blockquote cite,
.page-content blockquote cite,
.entry-content blockquote cite,
.prose blockquote cite {
    display: block;
    margin-top: 1em;
    font-size: 0.875rem;
    font-style: normal;
    color: #64748b;
    font-weight: 600;
}

.post-content blockquote cite::before,
.page-content blockquote cite::before,
.entry-content blockquote cite::before,
.prose blockquote cite::before {
    content: "— ";
}

/* ==========================================================================
   Code & Preformatted Text
   ========================================================================== */

.post-content code,
.page-content code,
.entry-content code,
.prose code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.875em;
    background-color: #f1f5f9; /* slate-100 */
    padding: 0.25em 0.5em;
    border-radius: 0.375rem;
    color: #0f172a;
}

.post-content pre,
.page-content pre,
.entry-content pre,
.prose pre {
    margin: 2em 0;
    padding: 1.5em;
    background-color: #1e293b; /* slate-800 */
    border-radius: 0.75rem;
    overflow-x: auto;
    color: #e2e8f0; /* slate-200 */
}

.post-content pre code,
.page-content pre code,
.entry-content pre code,
.prose pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
    color: inherit;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.post-content table,
.page-content table,
.entry-content table,
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.95rem;
}

.post-content thead,
.page-content thead,
.entry-content thead,
.prose thead {
    background-color: #f1f5f9; /* slate-100 */
}

.post-content th,
.page-content th,
.entry-content th,
.prose th {
    padding: 1em;
    text-align: left;
    font-weight: 700;
    color: #0f172a;
    border: 1px solid #e2e8f0; /* slate-200 */
}

.post-content td,
.page-content td,
.entry-content td,
.prose td {
    padding: 1em;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.post-content tbody tr:hover,
.page-content tbody tr:hover,
.entry-content tbody tr:hover,
.prose tbody tr:hover {
    background-color: #f8fafc; /* slate-50 */
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    margin: 2em 0;
}

.table-responsive table {
    margin: 0;
}

/* ==========================================================================
   Images & Figures
   ========================================================================== */

.post-content img,
.page-content img,
.entry-content img,
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5em 0;
}

.post-content figure,
.page-content figure,
.entry-content figure,
.prose figure {
    margin: 2em 0;
}

.post-content figcaption,
.page-content figcaption,
.entry-content figcaption,
.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b; /* slate-500 */
    margin-top: 0.75em;
    font-style: italic;
}

/* Image alignment */
.post-content .alignleft,
.page-content .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
    max-width: 50%;
}

.post-content .alignright,
.page-content .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
    max-width: 50%;
}

.post-content .aligncenter,
.page-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.post-content .alignnone,
.page-content .alignnone {
    display: block;
}

/* WordPress caption */
.post-content .wp-caption,
.page-content .wp-caption {
    max-width: 100%;
    margin: 2em 0;
}

.post-content .wp-caption-text,
.page-content .wp-caption-text {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.5em;
    font-style: italic;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

.post-content hr,
.page-content hr,
.entry-content hr,
.prose hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 3em 0;
}

/* Decorative HR */
.post-content hr.decorative,
.page-content hr.decorative {
    height: auto;
    background: none;
    text-align: center;
}

.post-content hr.decorative::after,
.page-content hr.decorative::after {
    content: "• • •";
    color: #D4AF37; /* accent */
    font-size: 1.5rem;
    letter-spacing: 1em;
}

/* ==========================================================================
   Abbreviations & Acronyms
   ========================================================================== */

.post-content abbr,
.page-content abbr,
.entry-content abbr,
.prose abbr {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* ==========================================================================
   Small Text & Subscript/Superscript
   ========================================================================== */

.post-content small,
.page-content small,
.entry-content small,
.prose small {
    font-size: 0.875em;
    color: #64748b;
}

.post-content sub,
.page-content sub,
.entry-content sub,
.prose sub,
.post-content sup,
.page-content sup,
.entry-content sup,
.prose sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.post-content sup,
.page-content sup,
.entry-content sup,
.prose sup {
    top: -0.5em;
}

.post-content sub,
.page-content sub,
.entry-content sub,
.prose sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Address
   ========================================================================== */

.post-content address,
.page-content address,
.entry-content address,
.prose address {
    font-style: normal;
    margin-bottom: 1.5em;
    padding: 1.5em;
    background-color: #f8fafc;
    border-radius: 0.75rem;
    border-left: 4px solid #D4AF37;
}

/* ==========================================================================
   Keyboard Input
   ========================================================================== */

.post-content kbd,
.page-content kbd,
.entry-content kbd,
.prose kbd {
    display: inline-block;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.125em 0.5em;
    box-shadow: 0 2px 0 #cbd5e1;
}

/* ==========================================================================
   WordPress Specific - Gutenberg Blocks
   ========================================================================== */

/* Separator block */
.post-content .wp-block-separator,
.page-content .wp-block-separator {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 3em 0;
}

.post-content .wp-block-separator.is-style-wide,
.page-content .wp-block-separator.is-style-wide {
    background: #e2e8f0;
}

.post-content .wp-block-separator.is-style-dots,
.page-content .wp-block-separator.is-style-dots {
    background: none;
    text-align: center;
}

.post-content .wp-block-separator.is-style-dots::before,
.page-content .wp-block-separator.is-style-dots::before {
    content: "···";
    color: #D4AF37;
    font-size: 1.5rem;
    letter-spacing: 1em;
}

/* Quote block */
.post-content .wp-block-quote,
.page-content .wp-block-quote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid #D4AF37;
    background-color: #f8fafc;
    border-radius: 0 0.75rem 0.75rem 0;
}

.post-content .wp-block-quote.is-style-large,
.page-content .wp-block-quote.is-style-large {
    font-size: 1.25rem;
}

/* Pullquote block */
.post-content .wp-block-pullquote,
.page-content .wp-block-pullquote {
    border: none;
    padding: 2em 0;
    text-align: center;
}

.post-content .wp-block-pullquote blockquote,
.page-content .wp-block-pullquote blockquote {
    border: none;
    background: none;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.post-content .wp-block-pullquote blockquote::before,
.page-content .wp-block-pullquote blockquote::before {
    content: '"';
    display: block;
    font-size: 4rem;
    color: #D4AF37;
    line-height: 1;
    margin-bottom: 0.25em;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

@media (max-width: 768px) {
    .post-content,
    .page-content,
    .entry-content,
    .prose {
        font-size: 1rem;
    }

    .post-content h1,
    .page-content h1,
    .entry-content h1,
    .prose h1 {
        font-size: 1.875rem;
    }

    .post-content h2,
    .page-content h2,
    .entry-content h2,
    .prose h2 {
        font-size: 1.5rem;
    }

    .post-content h3,
    .page-content h3,
    .entry-content h3,
    .prose h3 {
        font-size: 1.25rem;
    }

    .post-content h4,
    .page-content h4,
    .entry-content h4,
    .prose h4 {
        font-size: 1.125rem;
    }

    .post-content .alignleft,
    .page-content .alignleft,
    .post-content .alignright,
    .page-content .alignright {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .post-content blockquote,
    .page-content blockquote,
    .entry-content blockquote,
    .prose blockquote {
        padding: 1em 1.25em;
    }

    .post-content pre,
    .page-content pre,
    .entry-content pre,
    .prose pre {
        padding: 1em;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .post-content,
    .page-content,
    .entry-content,
    .prose {
        font-size: 12pt;
        color: #000;
    }

    .post-content a,
    .page-content a,
    .entry-content a,
    .prose a {
        color: #000;
        text-decoration: underline;
    }

    .post-content a[href]::after,
    .page-content a[href]::after,
    .entry-content a[href]::after,
    .prose a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    .post-content blockquote,
    .page-content blockquote,
    .entry-content blockquote,
    .prose blockquote {
        border-left-color: #000;
        background: none;
    }

    .post-content pre,
    .page-content pre,
    .entry-content pre,
    .prose pre {
        background: #f5f5f5;
        color: #000;
        border: 1px solid #ccc;
    }
}