/**
 * Trips Away - Content Typography & High-Readability Engine
 * Optimizes reading flow, mobile & desktop font scale, lists, tables, and images.
 */

:root {
    --typography-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --typography-font-body: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --typography-text-main: #243242;
    --typography-text-muted: #5a6e85;
    --typography-text-headings: #0c1a2f;
    --typography-primary: #43a3ec;
    --typography-primary-dark: #1b85d9;
    --typography-primary-soft: rgba(67, 163, 236, 0.08);
    --typography-line-height-body: 1.78;
    --typography-line-height-heading: 1.28;
}

/* Base typography applied to all CMS and rich content containers */
.visa-rich-content,
.dt-req-box,
.blog-rich-content,
.tour-rich-content,
.act-rich-content,
.page-content-wrapper,
.rich-content-area,
.content-optimized,
.mob-accordion-content,
.note-editable {
    font-family: var(--typography-font-body);
    font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.05rem);
    line-height: var(--typography-line-height-body);
    color: var(--typography-text-main);
    word-break: break-word;
    letter-spacing: -0.011em;
}

/* Headings Hierarchy */
.visa-rich-content h1, .dt-req-box h1, .blog-rich-content h1, .tour-rich-content h1, .act-rich-content h1, .page-content-wrapper h1, .note-editable h1,
.visa-rich-content h2, .dt-req-box h2, .blog-rich-content h2, .tour-rich-content h2, .act-rich-content h2, .page-content-wrapper h2, .note-editable h2,
.visa-rich-content h3, .dt-req-box h3, .blog-rich-content h3, .tour-rich-content h3, .act-rich-content h3, .page-content-wrapper h3, .note-editable h3,
.visa-rich-content h4, .dt-req-box h4, .blog-rich-content h4, .tour-rich-content h4, .act-rich-content h4, .page-content-wrapper h4, .note-editable h4,
.visa-rich-content h5, .dt-req-box h5, .blog-rich-content h5, .tour-rich-content h5, .act-rich-content h5, .page-content-wrapper h5, .note-editable h5,
.visa-rich-content h6, .dt-req-box h6, .blog-rich-content h6, .tour-rich-content h6, .act-rich-content h6, .page-content-wrapper h6, .note-editable h6 {
    font-family: var(--typography-font-heading);
    color: var(--typography-text-headings);
    line-height: var(--typography-line-height-heading);
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
    font-weight: 700;
}

.visa-rich-content h1, .blog-rich-content h1, .page-content-wrapper h1, .note-editable h1 {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.35rem);
    letter-spacing: -0.025em;
    font-weight: 800;
}

.visa-rich-content h2, .dt-req-box h2, .blog-rich-content h2, .tour-rich-content h2, .act-rich-content h2, .page-content-wrapper h2, .note-editable h2 {
    font-size: clamp(1.35rem, 2vw + 0.4rem, 1.75rem);
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 0.35rem;
}

.visa-rich-content h3, .dt-req-box h3, .blog-rich-content h3, .tour-rich-content h3, .act-rich-content h3, .page-content-wrapper h3, .note-editable h3 {
    font-size: clamp(1.15rem, 1.2vw + 0.35rem, 1.4rem);
    letter-spacing: -0.015em;
    font-weight: 600;
}

.visa-rich-content h4, .blog-rich-content h4, .page-content-wrapper h4, .note-editable h4 {
    font-size: clamp(1.05rem, 0.8vw + 0.3rem, 1.2rem);
    font-weight: 600;
}

/* Paragraphs & Spacing */
.visa-rich-content p,
.dt-req-box p,
.blog-rich-content p,
.tour-rich-content p,
.act-rich-content p,
.page-content-wrapper p,
.mob-accordion-content p,
.note-editable p {
    margin-top: 0;
    margin-bottom: 1.15rem;
}

.visa-rich-content p:last-child,
.dt-req-box p:last-child,
.blog-rich-content p:last-child,
.tour-rich-content p:last-child,
.act-rich-content p:last-child,
.page-content-wrapper p:last-child {
    margin-bottom: 0;
}

/* Bullet & Ordered Lists */
.content-list,
.visa-rich-content ul,
.dt-req-box ul,
.blog-rich-content ul,
.tour-rich-content ul,
.act-rich-content ul,
.page-content-wrapper ul,
.mob-accordion-content ul,
.note-editable ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    margin-bottom: 1.35rem;
}

.content-list li,
.visa-rich-content ul > li,
.dt-req-box ul > li,
.blog-rich-content ul > li,
.tour-rich-content ul > li,
.act-rich-content ul > li,
.page-content-wrapper ul > li,
.mob-accordion-content ul > li,
.note-editable ul > li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.68;
    color: var(--typography-text-main);
}

/* Custom High-Contrast Bullet Pill / Dot */
.content-list li::before,
.visa-rich-content ul > li::before,
.dt-req-box ul > li::before,
.blog-rich-content ul > li::before,
.tour-rich-content ul > li::before,
.act-rich-content ul > li::before,
.page-content-wrapper ul > li::before,
.mob-accordion-content ul > li::before,
.note-editable ul > li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.62rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--typography-primary), var(--typography-primary-dark));
    box-shadow: 0 0 0 3px var(--typography-primary-soft);
}

/* Ordered Lists */
.content-ordered-list,
.visa-rich-content ol,
.dt-req-box ol,
.blog-rich-content ol,
.tour-rich-content ol,
.act-rich-content ol,
.page-content-wrapper ol,
.mob-accordion-content ol,
.note-editable ol {
    counter-reset: content-counter;
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    margin-bottom: 1.35rem;
}

.content-ordered-list li,
.visa-rich-content ol > li,
.dt-req-box ol > li,
.blog-rich-content ol > li,
.tour-rich-content ol > li,
.act-rich-content ol > li,
.page-content-wrapper ol > li,
.mob-accordion-content ol > li,
.note-editable ol > li {
    counter-increment: content-counter;
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: 0.85rem;
    line-height: 1.68;
}

.content-ordered-list li::before,
.visa-rich-content ol > li::before,
.dt-req-box ol > li::before,
.blog-rich-content ol > li::before,
.tour-rich-content ol > li::before,
.act-rich-content ol > li::before,
.page-content-wrapper ol > li::before,
.mob-accordion-content ol > li::before,
.note-editable ol > li::before {
    content: counter(content-counter);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--typography-primary-soft);
    color: var(--typography-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--typography-font-heading);
}

/* Strong / Bold formatting inside content */
.visa-rich-content strong, .dt-req-box strong, .blog-rich-content strong, .tour-rich-content strong, .act-rich-content strong, .page-content-wrapper strong,
.visa-rich-content b, .dt-req-box b, .blog-rich-content b, .tour-rich-content b, .act-rich-content b, .page-content-wrapper b {
    color: #0f1d30;
    font-weight: 650;
}

/* Responsive Tables */
.table-responsive {
    border-radius: 12px;
    border: 1px solid rgba(67, 163, 236, 0.18);
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.table-responsive table {
    margin-bottom: 0 !important;
    width: 100%;
}

.table-responsive th {
    background-color: #f6f9fc;
    color: var(--typography-text-headings);
    font-family: var(--typography-font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid rgba(67, 163, 236, 0.2);
    white-space: nowrap;
}

.table-responsive td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-color: rgba(67, 163, 236, 0.12);
    font-size: 0.94rem;
}

.table-responsive tr:hover td {
    background-color: rgba(67, 163, 236, 0.03);
}

/* Media (Images & Videos) */
.visa-rich-content img,
.blog-rich-content img,
.tour-rich-content img,
.act-rich-content img,
.page-content-wrapper img,
.note-editable img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    margin: 1.25rem 0;
    display: inline-block;
}

/* Blockquotes / Highlights */
.visa-rich-content blockquote,
.blog-rich-content blockquote,
.page-content-wrapper blockquote {
    margin: 1.5rem 0;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, rgba(67, 163, 236, 0.07), rgba(27, 133, 217, 0.03));
    border-left: 4px solid var(--typography-primary);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #1e2e42;
}

/* Horizontal Rule Divider */
.visa-rich-content hr,
.blog-rich-content hr,
.page-content-wrapper hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(67, 163, 236, 0.3), transparent);
    margin: 2rem 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .visa-rich-content,
    .dt-req-box,
    .blog-rich-content,
    .tour-rich-content,
    .act-rich-content,
    .page-content-wrapper,
    .mob-accordion-content {
        line-height: 1.7;
    }
    
    .content-list li,
    .visa-rich-content ul > li,
    .dt-req-box ul > li,
    .blog-rich-content ul > li,
    .tour-rich-content ul > li,
    .act-rich-content ul > li,
    .page-content-wrapper ul > li,
    .mob-accordion-content ul > li {
        padding-left: 1.6rem;
        margin-bottom: 0.65rem;
    }
}